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

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

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

Я решил это сам, и я поместил ответ в область видимости, чтобы помочь другому пользователю, у которого есть такая же проблема: у нас есть событие в начальной загрузке, и мы можем использовать это событие для установки, overflow: inheritно это будет работать, если у вас нет свойства 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: В этом примере скрипки работает странно, и я не уверен, почему, но в моем проекте все работает нормально.

CSS только решение , чтобы ось ординат к переполнению.

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

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

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

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

Рабочий скрипт JS: http://jsfiddle.net/s270Lyrd/

Я использую 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');
    }
});

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

@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

мое 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-responsive», оно вычисляет высоту таблицы и расширяет ее (с заполнением), чтобы она соответствовала высоте, необходимой для отображения меню. Меню может быть любого размера.

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

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

Итак, $ table var в скрипте на самом деле является div! (для ясности ... или нет) :)

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

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

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

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

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

data-toggle="dropdown" data-boundary="window"

Это было исправлено в Bootstrap v4.1 и выше путем добавления data-boundary="viewport"( Bootstrap Dropdowns Docs )

Но для более ранних версий (v4.0 и ниже) я нашел этот фрагмент javascript, который отлично работает. Это работает для небольших таблиц и таблиц с прокруткой:

$('.table-responsive').on('shown.bs.dropdown', function (e) {
    var t = $(this),
        m = $(e.target).find('.dropdown-menu'),
        tb = t.offset().top + t.height(),
        mb = m.offset().top + m.outerHeight(true),
        d = 20; // Space for shadow + scrollbar.
    if (t[0].scrollWidth > t.innerWidth()) {
        if (mb + d > tb) {
            t.css('padding-bottom', ((mb + d) - tb));
        }
    }
    else {
        t.css('overflow', 'visible');
    }
}).on('hidden.bs.dropdown', function () {
    $(this).css({'padding-bottom': '', 'overflow': ''});
});

Немного подчистил решение @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');
});

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

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

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

Затем в адаптивном div таблицы я добавил минимальную высоту 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>

Основываясь на принятом ответе и ответе @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 */
    }
}

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

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

Ответ Burebistaruler работает нормально для меня на ios8 (iphone4s), но не работает на 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" );
})

Это может быть полезно для кого-то другого. Я использую DatatablesJS. Я добавляю 500 пикселей к текущей высоте таблицы. Я делаю это, потому что 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>

Перед:

После показа раскрывающегося списка:

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

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

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

Пока люди еще застряли в этом вопросе, а мы уже в 2020 году. Я получаю решение на чистом CSS, задав выпадающему меню гибкий дисплей

этот фрагмент отлично работает с datatable-scroll-wrapклассом

.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu {
    display: flex;
}
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a {
    display: flex;
}

Ну, читая верхний ответ, я увидел, что он действительно не работает, когда вы видите полосу прокрутки, а кнопка переключения была в последнем столбце (в моем случае) или другом столбце, который не отображается

Но если вы измените "наследовать" на "скрытый", это будет работать.

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

Попробуй сделать так.

Внутри bootstrap.css найдите следующий код:

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

... и обновите это:

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

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

.table-responsive {
    overflow: inherit;
}

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

В моем случае это нормально работает:

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