it-roy-ru.com

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

У меня проблема с выпадающими кнопками внутри таблиц, когда они реагируют и активны при прокрутке, потому что раскрывающийся список не виден из-за свойства overflow: auto;. Как я могу это исправить, чтобы показать опцию выпадающего меню кнопки, когда она свернута? Я могу использовать jQuery, но после того, как у меня возникнут проблемы с прокруткой влево-вправо, я решил найти другое решение .... Я приложил фотографию, чтобы лучше понять.enter image description here

Вот небольшая скрипка js:

59
BurebistaRuler

Я решил это сам и помещаю ответ в область видимости, чтобы помочь другому пользователю, у которого возникла такая же проблема: у нас есть событие в начальной загрузке, и мы можем использовать это событие для установки overflow: inherited, но это будет работать, если у вас нет свойства css у вашего родителя контейнер.

$('.table-responsive').on('show.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "inherit" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "auto" );
})

а это скрипка

info: В этом примере скрипта работает странно, и я не уверен, почему, но в моем проекте работает просто отлично.

50
BurebistaRuler

Решение CSS only - разрешить переполнение оси Y.

http://www.bootply.com/YvePJTDzI0

.table-responsive {
  overflow-y: visible !important;
}

РЕДАКТИРОВАТЬ

Другое решение только для CSS - быстро применить переполнение на основе ширины области просмотра: 

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        overflow: inherit;
    }
}

https://www.codeply.com/go/D3XBvspns4

36
Zim

Я бы выбрал другой подход, я отделил элемент от родителя и установил его с абсолютной позицией с помощью jQuery.

Рабочая JS Fidle: http://jsfiddle.net/s270Lyrd/

 enter image description here

Решение JS, которое я использую. 

//fix menu overflow under the responsive table 
// hide menu on click... (This is a must because when we open a menu )
$(document).click(function (event) {
    //hide all our dropdowns
    $('.dropdown-menu[data-parent]').hide();

});
$(document).on('click', '.table-responsive [data-toggle="dropdown"]', function () {
    // if the button is inside a modal
    if ($('body').hasClass('modal-open')) {
        throw new Error("This solution is not working inside a responsive table inside a modal, you need to find out a way to calculate the modal Z-index and add it to the element")
        return true;
    }

    $buttonGroup = $(this).parent();
    if (!$buttonGroup.attr('data-attachedUl')) {
        var ts = +new Date;
        $ul = $(this).siblings('ul');
        $ul.attr('data-parent', ts);
        $buttonGroup.attr('data-attachedUl', ts);
        $(window).resize(function () {
            $ul.css('display', 'none').data('top');
        });
    } else {
        $ul = $('[data-parent=' + $buttonGroup.attr('data-attachedUl') + ']');
    }
    if (!$buttonGroup.hasClass('open')) {
        $ul.css('display', 'none');
        return;
    }
    dropDownFixPosition($(this).parent(), $ul);
    function dropDownFixPosition(button, dropdown) {
        var dropDownTop = button.offset().top + button.outerHeight();
        dropdown.css('top', dropDownTop + "px");
        dropdown.css('left', button.offset().left + "px");
        dropdown.css('position', "absolute");

        dropdown.css('width', dropdown.width());
        dropdown.css('heigt', dropdown.height());
        dropdown.css('display', 'block');
        dropdown.appendTo('body');
    }
});
12
Wazime

Это решение отлично сработало для меня:

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

Более подробно: https://github.com/twbs/bootstrap/issues/15374

11
pcuong

У меня есть решение, использующее только CSS, просто используйте относительное положение для выпадающих меню внутри таблицы:

@media (max-width: 767px) {
  .table-responsive .dropdown-menu {
    position: relative; /* Sometimes needs !important */
  }
}

https://codepen.io/leocaseiro/full/rKxmpz/

9
Leo Caseiro

мое 2 ¢ быстрое глобальное исправление:

// drop down in responsive table

(function () {
  $('.table-responsive').on('shown.bs.dropdown', function (e) {
    var $table = $(this),
        $menu = $(e.target).find('.dropdown-menu'),
        tableOffsetHeight = $table.offset().top + $table.height(),
        menuOffsetHeight = $menu.offset().top + $menu.outerHeight(true);

    if (menuOffsetHeight > tableOffsetHeight)
      $table.css("padding-bottom", menuOffsetHeight - tableOffsetHeight);
  });

  $('.table-responsive').on('hide.bs.dropdown', function () {
    $(this).css("padding-bottom", 0);
  })
})();

Пояснения: Когда отображается раскрывающееся меню внутри «.table-responseive», оно вычисляет высоту таблицы и расширяет ее (с отступами), чтобы соответствовать высоте, необходимой для отображения меню. Меню может быть любого размера.

В моем случае это не таблица с классом «.table-responseive», это div-обертка:

<div class="table-responsive" style="overflow:auto;">
    <table class="table table-hover table-bordered table-condensed server-sort">

Таким образом, переменная $ table в скрипте - это на самом деле div! (просто чтобы было понятно ... или нет) :)

Примечание: я обертываю это в функцию, чтобы мой IDE мог свернуть функцию;) но это не обязательно!

8
BaltazarQc

Для справки, это 2018, и я использую BS4.1

Попробуйте добавить data-boundary="viewport" к кнопке, которая переключает выпадающий список (тот, который имеет класс dropdown-toggle). Смотрите https://getbootstrap.com/docs/4.1/components/dropdowns/#options

5
Ben

Рекомендуемое и выбранное решение не всегда является лучшим решением. К сожалению, это недавно использованное решение и оно создает несколько полос прокрутки на странице в зависимости от ситуации. 

Мой метод был немного другим. 

Я содержал таблично-зависимый div в другом div. Затем я применил высоту 100%, ширину: 100%, блок отображения и абсолютную позицию, чтобы высота и ширина основывались на размере страницы, и установил переполнение скрытым. 

Затем на столе отзывчивый div я добавил min-height 100%

<div class="table_container" 
    style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">

Как вы можете видеть в рабочем примере ниже, без добавления полос прокрутки, без забавного поведения и практически в процентах использования - оно должно работать независимо от размера экрана. Я не проверял это для этого как бы то ни было. Если по какой-то причине это не удается, можно заменить 100% на 100vh и 100vw соответственно.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

            <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="table_container" style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Value1</th>
                            <th>Value2</th>
                            <th>Value3</th>
                            <th>Value4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>

                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>
                            <td>DATA</td>
                        </tr>
                        <tr>
                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>                                    </ul>
                                </div>
                            </td>

                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>
                            <td>DATA</td>
                        </tr>
                    </tbody>
                </table>
            </div>
</div>

2
Bruce

Немного убрал решение @Wazime. Прекрасно работает как общее решение.

$(document).on('shown.bs.dropdown', '.table-responsive', function (e) {
    // The .dropdown container
    var $container = $(e.target);

    // Find the actual .dropdown-menu
    var $dropdown = $container.find('.dropdown-menu');
    if ($dropdown.length) {
        // Save a reference to it, so we can find it after we've attached it to the body
        $container.data('dropdown-menu', $dropdown);
    } else {
        $dropdown = $container.data('dropdown-menu');
    }

    $dropdown.css('top', ($container.offset().top + $container.outerHeight()) + 'px');
    $dropdown.css('left', $container.offset().left + 'px');
    $dropdown.css('position', 'absolute');
    $dropdown.css('display', 'block');
    $dropdown.appendTo('body');
});

$(document).on('hide.bs.dropdown', '.table-responsive', function (e) {
    // Hide the dropdown menu bound to this button
    $(e.target).data('dropdown-menu').css('display', 'none');
});
1
quakes

Это может быть полезно для кого-то еще. Я использую DatatablesJS. Я добавляю 500px к текущей высоте таблицы. Я делаю это, потому что Datatables позволяет вам использовать 10, 20 и т.д. Страниц в вашей таблице. Поэтому мне нужно динамически рассчитать высоту стола. 
Когда отображается выпадающий список, я добавляю дополнительную высоту.
Когда раскрывающийся список скрыт, я сбрасываю высоту исходного стола.

$(document).ready(function() {
    $('.table-responsive .dropdown').on('shown.bs.dropdown', function () {
          console.log($('#table-responsive-cliente').height() + 500)
          $("#table-responsive-cliente").css("height",$('#table-responsive-cliente').height() + 500 );
    })

    $('.table-responsive .dropdown').on('hide.bs.dropdown', function () {
           $("#table-responsive-cliente").css("height","auto");
    })
})

И HTML

<div class="table-responsive" id="table-responsive-cliente">
    <table class="table-striped table-hover">
     ....

     ....
    </table>
</div>

До:  enter image description here

После раскрывающегося списка отображается:  enter image description here

0
miguel.angel

Это сработало для меня в Bootstrap 4, поскольку оно имеет точки останова, отличные от v3:

@media (min-width: 992px) {
    .table-responsive {
        overflow: inherit;
    }
}
0
ar31an

Ответ Burebista Ruler работает нормально для меня на ios8 (iphone 4s), но не работает на Android, который раньше работал .. Что я имею в виду, работает для меня на ios8 (iphone4s) и andoir:

$('.table-responsive').on('show.bs.dropdown', function () {
 $('.table-responsive').css( "min-height", "400px" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "min-height", "none" );
})
0
Oscar Jofre

Просто используйте это

.table-responsive {
    overflow: inherit;
}

Он работает на Chrome, но не на IE10 или Edge, потому что наследуемое свойство не поддерживается

0
Deepak swain

Определите это свойства. Удачи!

data-toggle="dropdown" data-boundary="window"
0
Halit Yeşil

Основываясь на принятом ответе и ответе @LeoCaseiro, вот что я использовал в своем случае:

@media (max-width: 767px) {
    .table-responsive{
        overflow-x: auto;
        overflow-y: auto;
    }
}
@media (min-width: 767px) {
    .table-responsive{
        overflow: inherit !important; /* Sometimes needs !important */
    }
}

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

Надеюсь, это поможет кому-то.

0
medBouzid

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

0
roshin jose