0

Есть блок. Имеет вид строки таблицы с ячейками. К этому блоку применен горизонтальный скролл. в чем проблема?

при Нажатии на последний блок(ячейку) этой строки, появляется дропдаун. При появлении дропдауна появляется вертикальный скролл, а сам дропдаун прячется при выходе за пределы родителя

.scroll-container
    .headerTable
    .contentTable
        .wrapperItem
            .tableItem
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                    .wrapper-drop
                        .icon
                        .actionDropDown
    .scroll-x
    .scroll-y

все элементы div'ы

2
  • Надо добавить код. Решений может быть несколько, зависят от вашей реализации таблицы. 30 апр 2019 в 12:30
  • К сожалению, приведенный код никак не помогает понять, что у вас там происходит. 1 мая 2019 в 12:28

1 ответ 1

0

Проблема в том, что у вас применен скролл (а точнее, overflow | overflow-x, отличный от visible). Как только к элементу по одному направлению применен оверфлоу, отличный от visible, элемент получает свойство оверфлоу auto по оставшемуся. Т.е., если вы задали, например, overflow-x:hidden, то элемент начнет себя вести как overflow-y:auto и поэтому когда его содержимое начнет становиться больше его самого, будет появляться внутренний скроллинг.

Чтобы содержимое элемента выходило за его пределы, элемент должен иметь свойства overflow-x:visible; overflow-y:visible; (это свойства дивов по умолчанию, если что). И, да, абсолютное позиционирование тут не поможет.

Если у вас возникла необходимость чтобы контейнер скроллился по одному направлению, но вел себя как overflow:visible по другому, вам придется хорошенько поизвращаться с дополнительными элементами и скриптами... ну или сделать изначально по-человечески - так, чтобы подобной необходимости не возникало.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.