Как сделать чтоб выпадающий дропдаун не обрезался в блоке с overlfow: auto и максимальной высотой?

Question

Есть блок с максимальной высотой и overflow: auto внутри и в нем список с итемами в которых есть кнопка которая при клике открывает дропдаун с фиксированной высотой, у дропдауна position: absolute; right: 0; top: 100%; . Проблема в том что блок который обрезается обрезает также дропдаун когда блок проскроллен в самый вниз. Как правильно написать условие на JS чтоб дропдаун понимал когда нужно менять top значение в тот момент когда он может обрезаться хотя бы частично из-за обрезаного блока родителя?

Answer 1

Для этого сам выпадающий список должен находится в body и иметь position: fixed и большой z-index. Чтобы выпадающий список был под селектом, вычисляешь координаты селекта через Element.getBoundingClientRect() и у выпадающего списка меняешь свойства top, left, width. Еще все эти вычисления нужно обновлять при скролле страницы, либо отключить скролл страницы при открытии селекта

Answer 2

Вывести блок из под overflow: hidden можно с помощью родителя. Остаётся только спозиционировать dropdown относительно нужного элемента с помощью js.

div {
  width: 50px;
  height: 50px;
}

.wrap {
  background: red;
  position: relative;
}

.overflow {
  background: green;
  overflow: hidden;
}

.dropdown {
  background: blue;
  position: absolute;
  right: -50px;
}

<div class='wrap'>
  <div class='overflow'>
    <div class='dropdown'>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать чтоб выпадающий дропдаун не обрезался в блоке с overlfow: auto и максимальной высотой?

Ответы (2 шт):