Как исправить пожирание абсолютного позиционирования родительским блоком?

Question

[Heorhii]

Всем привет. Столкнулся с такой ситуацией когда родитель (.table_container) "поедает" блок который имеет абсолютное позиционирование, в моём случае это select в левом нижнем углу, z-index ситуацию никак не меняет, перепробовал всё что знал, может у кого-то есть идеи? Буду крайне благодарен за любую помощь..
Ссылочка на пример

Comments

[Rustam Bainazarov]

Либо overflow: hidden убирайте, либо позиционируйте список с помощью JS. При этом список должен быть вне блока с overflow: hidden.

[Heorhii]

Рустам Байназаров, окей, а есть пример такого позиционирования вне родителя на js?

[Rustam Bainazarov]

Георгий Городенко, есть, только я за телефоном.

Сначала получаете координаты элемента, относительно которого нужно позиционировать, а список вешаете на абсолютное позиционирование относительно body с нужными значениями top, left (берете из этих координат).

Answer 1

[Дима Паутов]

Ну так у вас

overflow-x: auto;
    overflow-y: hidden;

стоят, они и обрезают. Если они нужны, то нужно сделать так, что бы выпадающий список был отдельным элементом и позиционировался относительно позиции элемента, а не родителя. Так, как это сделано в select2

Comments

[Heorhii]

Хорошо, спасибо за ответ. Но вот убрать запрет на вертикальную прокрутку в данной ситуации мне никак нельзя

[Дима Паутов]

Георгий Городенко, поэтому я написал решение, что нужно юзать библиотеку селектов с несколько иным подходом. А именно, select2

[Heorhii]

Дима Турков, к сожалению это мне тоже не совсем подходит, эти селекты реализованы на иной библиотеке - https://hernansartorio.com/jquery-nice-select/
Но тем не менее спасибо за помощь