Tôi gặp sự cố với các nút thả xuống bên trong bảng khi phản hồi và cuộn hoạt động vì trình đơn thả xuống không hiển thị do thuộc overflow: auto;tính. Làm cách nào để khắc phục điều đó để hiển thị tùy chọn thả xuống của nút khi nút này bị thu gọn? Tôi có thể sử dụng một số jQuery nhưng sau khi gặp vấn đề với cuộn trái-phải nên tôi quyết định tìm giải pháp khác. Mình có đính kèm ảnh để hiểu rõ hơn.
Nút Bootstrap thả xuống bên trong bảng đáp ứng không hiển thị do cuộn
Câu trả lời:
Tôi đã tự giải quyết vấn đề này và tôi đưa câu trả lời vào phạm vi để giúp người dùng khác có cùng vấn đề: Chúng tôi có một sự kiện trong bootstrap và chúng tôi có thể sử dụng sự kiện đó để đặt overflow: inheritnhưng điều này sẽ hoạt động nếu bạn không có thuộc tính css trên cha mẹ của bạn thùng đựng hàng.
$('.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: Trong ví dụ fiddle này hoạt động kỳ lạ và tôi không chắc tại sao nhưng trong dự án của tôi hoạt động tốt.
3
Điều này chỉ hoạt động đối với các bảng có danh sách thả xuống trên ô đầu tiên của dòng.
—
Almino Melo
trong trường hợp bảng được tải động:
—
Exlord
$('body') .on('show.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "visible"); }) .on('hide.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "auto"); });
Nhưng sau khi nhấp chuột, dữ liệu sẽ vượt ra ngoài kích thước tối thiểu của màn hình. Vì vậy, điều này không hoạt động. !!!!
—
Shreya Shah
Điều này sẽ hoạt động nếu bạn có thể ngăn bảng cuộn ngược lại bên trái khi trình đơn thả xuống được mở. Nhưng tương tự như vậy, nếu bạn có menu thả xuống bên phải màn hình, bảng sẽ giật sang trái khi mở. Các danh sách thả xuống ở xa bên phải (bị che bởi
—
Ponyboy
.table-responsivelớp) hoàn toàn bị ẩn khi cố gắng chỉnh sửa chúng.
Một giải pháp duy nhất trong CSS là cho phép trục y tràn.
http://www.bootply.com/YvePJTDzI0
.table-responsive {
overflow-y: visible !important;
}
BIÊN TẬP
Một giải pháp CSS duy nhất khác là áp dụng một cách phản ứng tràn dựa trên chiều rộng khung nhìn:
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: inherit;
}
}
@ZimSystem Vẫn làm điều tương tự, về cơ bản đây không phải là giải pháp.
—
Jemar Jones
Giải pháp này hoạt động ngay cả khi bạn xóa css tùy chỉnh. Có thể đó là một thứ html. Tôi vẫn đang tìm kiếm một giải pháp chỉ dành cho css.
—
fernandodof
Không. Không hoạt động. Tôi đoán đó là vì tôi đang sử dụng dữ liệu bảng
—
peterchaula
hoạt động với tôi ngoại trừ nút nằm ở cuối trang ... sau đó menu thả xuống xuất hiện bên ngoài cửa sổ ...
—
Brucie Alpha
Để tham khảo, đó là năm 2018 và tôi đang sử dụng BS4.1
Hãy thử thêm data-boundary="viewport"vào nút bật / tắt menu thả xuống (nút có lớp học dropdown-toggle). Xem https://getbootstrap.com/docs/4.1/components/dropdowns/#options
Tôi xác nhận rằng đây cũng là một giải pháp hiệu quả mà tôi đã đưa ra.
—
sdvnksv
Tôi không thể nói cho các phiên bản trước đó, nhưng đối với Bootstrap 4 thì đây thực sự là giải pháp tốt nhất. Nó đơn giản, nó không hy sinh khả năng đáp ứng, nó sử dụng chức năng đã được cung cấp trong khuôn khổ thay vì cố gắng tấn công xung quanh nó bằng các kiểu hoặc tập lệnh bổ sung.
—
T. Linnell
Tôi đã thực hiện một cách tiếp cận khác, tôi đã tách phần tử khỏi phần tử gốc và đặt nó với vị trí tuyệt đối bằng jQuery
Làm việc JS fidle: http://jsfiddle.net/s270Lyrd/
Giải pháp JS mà tôi đang sử dụng.
//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');
}
});
Giải pháp này đã làm việc tuyệt vời cho tôi:
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: visible;
}
}
Chi tiết hơn: https://github.com/twbs/bootstrap/issues/15374
bản sửa lỗi toàn cầu nhanh chóng 2 ¢ của tôi:
// 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);
})
})();
Giải thích: Khi trình đơn thả xuống bên trong '.table-responsive' được hiển thị, nó sẽ tính toán chiều cao của bảng và mở rộng nó (có đệm) để phù hợp với chiều cao cần thiết để hiển thị menu. Thực đơn có thể có kích thước bất kỳ.
Trong trường hợp của tôi, đây không phải là bảng có lớp '.table-responsive', nó là một div bao bọc:
<div class="table-responsive" style="overflow:auto;">
<table class="table table-hover table-bordered table-condensed server-sort">
Vì vậy, $ table var trong script thực sự là một div! (chỉ để rõ ràng ... hay không) :)
Lưu ý: Tôi bọc nó trong một hàm để IDE của tôi có thể thu gọn hàm;) nhưng không bắt buộc!
Đây là giải pháp duy nhất phù hợp với tôi, nhưng tôi khuyên bạn nên sử dụng $ table.css ("padding-bottom", menuOffsetHeight - tableOffsetHeight + 16); insetad của $ table.css ("padding-bottom", menuOffsetHeight - tableOffsetHeight); để thêm phần đệm bổ sung trên bootstrap theo mặc định, cộng với một khoảng trống nhỏ ở dưới cùng.
—
Phil Young
Điều này hiệu quả, nhưng phần đệm làm cho nó trông xấu. Ước gì có một giải pháp làm cho nó hoạt động mà không bị phình ra.
—
Qasim
giải pháp hay và đơn giản
—
NMC
Tôi có một giải pháp chỉ sử dụng CSS, chỉ sử dụng vị trí tương đối cho các menu thả xuống bên trong bảng đáp ứng:
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: relative; /* Sometimes needs !important */
}
}
đây là giải pháp tốt nhất, tôi đang sử dụng nó cho ui-select trong bảng đáp ứng của mình.
—
Sergio Ivanuzzo
Giải pháp tốt nhất cũng cho tôi
—
Mauro
Trò chơi này không hoạt động . Nó tiếp tục ẩn danh sách thả xuống bên dưới bảng.
—
HelloIT
@HelloIT hãy thử codepen (đã cập nhật) codepen.io/leocaseiro/pen/rKxmpz
—
Leo Caseiro
Đồng ý với @hellioIT phương pháp này không xuất hiện để được làm việc trong bút
—
MrPaulDriver
Xác định thuộc tính này. Chúc may mắn!
data-toggle="dropdown" data-boundary="window"
Giải pháp duy nhất cho Bootstrap 4
—
nevada_scout
Điều này đã được khắc phục trong Bootstrap v4.1 trở lên bằng cách thêm data-boundary="viewport"( Tài liệu thả xuống Bootstrap )
Nhưng đối với các phiên bản trước đó (v4.0 trở xuống), tôi thấy đoạn mã javascript này hoạt động hoàn hảo. Nó hoạt động cho các bảng nhỏ và bảng cuộn:
$('.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': ''});
});
Làm sạch một chút giải pháp @Wazime. Hoạt động tuyệt vời như một giải pháp chung.
$(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');
});
Giải pháp được khuyến nghị và lựa chọn, không phải lúc nào cũng là giải pháp tốt nhất. Thật không may, giải pháp linkedin được sử dụng gần đây và nó tạo ra nhiều thanh cuộn trên trang dựa trên tình huống.
Phương pháp của tôi hơi khác.
Tôi đã chứa div đáp ứng bảng trong một div khác. Sau đó, tôi áp dụng chiều cao 100%, chiều rộng: 100%, khối hiển thị và vị trí tuyệt đối để chiều cao và chiều rộng dựa trên kích thước trang và đặt tràn thành ẩn.
Sau đó, trên div đáp ứng của bảng, tôi đã thêm chiều cao tối thiểu là 100%
<div class="table_container"
style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">
Như bạn có thể thấy trong ví dụ làm việc bên dưới, không có thanh cuộn nào được thêm vào, không có hành vi hài hước và thực tế là nó sử dụng tỷ lệ phần trăm - nó sẽ hoạt động bất kể kích thước màn hình. Tuy nhiên, tôi đã không thử nghiệm điều này cho điều đó. Nếu không thành công vì lý do nào đó, người ta có thể thay thế 100% bằng 100vh và 100vw tương ứng.
<!-- 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>
Không phải là giải pháp cho chiều cao xem nhỏ hơn. Các liên kết thả xuống bên dưới sẽ không còn truy cập được nữa do không thể xem được.
—
Seika85,
Dựa trên câu trả lời được chấp nhận và câu trả lời của @LeoCaseiro, đây là những gì tôi đã kết thúc sử dụng trong trường hợp của mình:
@media (max-width: 767px) {
.table-responsive{
overflow-x: auto;
overflow-y: auto;
}
}
@media (min-width: 767px) {
.table-responsive{
overflow: inherit !important; /* Sometimes needs !important */
}
}
trên màn hình lớn, menu thả xuống sẽ không bị ẩn sau bảng phản hồi và trong màn hình nhỏ, nó sẽ bị ẩn đi nhưng vẫn ổn vì dù sao cũng có thanh cuộn trong thiết bị di động.
Hy vọng điều này sẽ giúp ai đó.
Phản hồi của Burebistaruler hoạt động tốt đối với tôi trên ios8 (iphone4s) nhưng không hoạt động trên Android mà trước đó đã hoạt động. Những gì tôi đã không phù hợp với tôi trên ios8 (iphone4s) và andoir là:
$('.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" );
})
Điều này có thể hữu ích cho người khác. Tôi đang sử dụng DatatablesJS. Tôi thêm 500px vào chiều cao hiện tại của bảng. Tôi làm điều này vì Datatable cho phép bạn sử dụng các trang 10, 20, v.v. trong bảng của bạn. Vì vậy, tôi cần phải tính toán di động chiều cao của bảng.
Khi trình đơn thả xuống được hiển thị, tôi thêm chiều cao bổ sung.
Khi menu thả xuống bị ẩn, tôi đặt lại chiều cao của bảng gốc.
$(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");
})
})
Và HTML
<div class="table-responsive" id="table-responsive-cliente">
<table class="table-striped table-hover">
....
....
</table>
</div>
Trước:
Sau khi trình đơn thả xuống được hiển thị:
Chúng tôi đã giải quyết vấn đề này tại nơi làm việc bằng cách áp dụng một lớp .dropup vào menu thả xuống khi menu thả xuống gần cuối bảng. nhập mô tả hình ảnh ở đây
Cuối cùng thì tôi hài lòng nhất với giải pháp đó.
—
Furgas
$('table tr:nth-last-child(-n+3) td').addClass('dropup').
Miễn là mọi người vẫn còn mắc kẹt trong vấn đề này và chúng ta đã đến năm 2020 rồi. Tôi nhận được giải pháp CSS thuần túy bằng cách cho menu thả xuống hiển thị linh hoạt
đoạn mã này hoạt động tốt với datatable-scroll-wraplớp
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu {
display: flex;
}
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a {
display: flex;
}
Chà, đọc câu trả lời trên cùng, tôi thấy rằng nó thực sự không hoạt động khi bạn nhìn thấy thanh cuộn và nút bật tắt ở cột cuối cùng (trong trường hợp của tôi) hoặc cột khác không nhìn thấy
Tuy nhiên, nếu bạn thay đổi "inherit" cho "hidden" thì nó sẽ hoạt động.
$('.table-responsive').on('show.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "hidden" );
}).on('hide.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "auto" );
})
Cố gắng làm theo cách đó.
Chỉ cần sử dụng cái này
.table-responsive {
overflow: inherit;
}
Nó hoạt động trên Chrome, nhưng không hoạt động trên IE10 hoặc Edge vì thuộc tính kế thừa không được hỗ trợ