Розкривне меню кнопки завантаження всередині адаптивної таблиці не видно через прокрутку

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

Ось невеличка скрипка js:

Я вирішив це і поставив відповідь на область, щоб допомогти іншому користувачеві, який має ту ж проблему: у нас є подія в bootstrap, і ми можемо використовувати цю подію для встановлення, 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 global швидке глобальне виправлення:

// 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">

Отже, 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');
});

Рекомендоване та обране рішення не завжди є найкращим рішенням. На жаль, це рішення, яке нещодавно використовувалося, і створює на сторінці кілька смуг прокрутки залежно від ситуації.

Мій метод був дещо іншим.

Я містив 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% на 100 і 100 Вт відповідно.

<!-- 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. Я додаю 500px до поточної висоти таблиці. Я роблю це, оскільки таблиці даних дозволяють використовувати сторінки 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;
}