Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

Неправильное отображение элементов в списке в FF при overflow-y: auto

Наткнулся на проблему с отображением списка в FF (в Chrome/IE работает нормально). Проблема в том что при overflow: auto в FF скорллбар съедает самый длинный элемент в списке, как будто накладывает скроллбар поверх списка а не прикрепляет его сбоку как в IE и Chrome. overflow-y: scroll решает проблему, но в таком случае скроллбар будет отображаться постоянно, даже когда он функционально не нужен, а это в моем случае неприемлемо. white-space: nowrap тоже нужен, так как по требованию нужно отображать элементы одной строкой. Ширину div элемента тоже желательно оставить на width: auto
div { display: block; min-width: 40px; width: auto; position: absolute; top: 50px; left: 100px; background: #fff; z-index: 102; max-height: 100px; overflow-y: auto; overflow-x: visible; border-radius: 5px; box-shadow: 0px 5px 60px -7px #808e95; padding: 20px 10px; margin: 5px 0 0; } ul { overflow: hidden; white-space: nowrap; list-style: none; margin: 0; padding: 0; }

  • Element
  • Element
  • Element
  • Element
  • Element
  • Element
  • REALLY BIG ELEMENT INSERTED HERE!
  • Element
  • Element
  • Element
  • Element
  • Element
  • Element

В общем можно как-то это решить не прибегая к JS костылям?


Ответ

Можно обойти если обернуть текст в span и задать padding-left равный ширине Firefox скроллбара (примерно 20px). Но проблема в том, что в остальных браузерах этот padding-left будет отображаться рядом со скроллбаром, поэтому решение на любителя но зато без лишних вычислений и JS костылей :)
div { width: auto; position: absolute; top: 100px; left: 100px; background: #fff; max-height: 100px; overflow-y: auto; overflow-x: visible; border-radius: 5px; box-shadow: 0px 5px 60px -7px #808e95; } ul { overflow: hidden; margin: 0; padding: 0; } span{ padding-right: 22px; display: inline-block; white-space: nowrap; }

  • Element
  • Element
  • Element
  • Element
  • Element
  • Element
  • Element
  • REALLY BIG ELEMENT INSERTED HERE!
  • Element
  • Element
  • Element
  • Element
  • Element

Комментариев нет:

Отправить комментарий