Прокрутите, даже если для параметра overflow-y установлено значение visible

У меня есть загрузочная таблица с выпадающей кнопкой.

Я сделал overflow-y для фиксированного тела таблицы видимым, чтобы не было полосы прокрутки. (Спасибо CrazyMatt, Bootstrap-table, переполнение)

Но я все еще хочу, чтобы overflow-x был автоматическим, потому что у меня много столбцов. В противном случае на мобильных устройствах сайт выглядит очень уродливо — он не подходит. Мне нужна полоса прокрутки в мобильном режиме.

Когда я использую:

.fixed-table-body {
    overflow-x: visible;
    overflow-y: visible;
    height: 100%;
}

... таблица идеально подходит для настольных компьютеров и планшетов (не мобильных) - и кнопка раскрывающегося списка также работает

Но когда я использую:

.fixed-table-body {
    overflow-x: auto;
    overflow-y: visible;
    height: 100%;
}

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

Как я могу решить проблему?

Jsfiddle: https://jsfiddle.net/qr3ao2e3/2/


twitter-bootstrap bootstrap-table
person Kristoffer    schedule 16.01.2016    source источник
comment
вот кое-что для вас jsfiddle.net/qr3ao2e3/4   -  person Lakshya    schedule 16.01.2016
comment
Спасибо Лакшья. Но если я перейду от раскрывающегося списка к раскрывающемуся, проблема появится вверху. Посмотрите на всплывающее окно вверху. Пропадает несколько пикселей.   -  person Kristoffer    schedule 16.01.2016

Ответы (2)


arrow_upward
0
arrow_downward

z-index может решить вашу проблему. Попробуйте использовать ниже и посмотрите, работает ли он:

.fixed-table-body {
  overflow-x: auto;
  overflow-y: visible;
  height: 100%;
}
.table{
  position:relative;
  z-index:1;
}
.dropdown-menu{
  position:relative;
  z-index:2;
}

Используйте медиа-запросы, чтобы применить его только на мобильном устройстве.

person Jitesh Yadav    schedule 16.01.2016
comment
Спасибо Житеш! Но таблица выглядит странно, когда я нажимаю на раскрывающийся список. См. jsfiddle.net/qr3ao2e3/5. - person Kristoffer; 16.01.2016
comment
Надеюсь, вы говорите о просмотре небольшого устройства. Это связано с тем, что ширина вашего раскрывающегося списка больше ширины столбца, и когда раскрывающийся список открывается, он пытается настроить, следовательно, растягивая столбец. Что вы можете сделать, так это установить минимальную ширину столбца, равную ширине раскрывающегося списка. - person Jitesh Yadav; 16.01.2016
comment
Проверьте комментарий Лакши, если это то, что вы ищете. - person Jitesh Yadav; 16.01.2016
comment
Спасибо еще раз. Но даже если я изменю настройки ширины, у меня все равно возникнет проблема с высотой? Выпадающий список по-прежнему отображается внутри ячейки таблицы вместо красивого и гладкого div над всем? - person Kristoffer; 16.01.2016

arrow_upward
0
arrow_downward

Я решил это так. Решение не оптимальное, но работает.

$('.dropdown').on({
    "shown.bs.dropdown": function() { $('.fixed-table-body').css('overflow-x','visible'); },
    "hide.bs.dropdown":  function() { $('.fixed-table-body').css('overflow-x','auto'); }
});
person Kristoffer    schedule 17.01.2016