Saya memiliki masalah dengan tombol drop-down di dalam tabel saat responsif dan scroll aktif karena drop-down tidak terlihat karena overflow: auto;properti. Bagaimana cara memperbaikinya untuk menampilkan opsi drop-down tombol saat ini diciutkan? Saya dapat menggunakan beberapa jQuery tetapi setelah saya memiliki masalah dengan scroll ke kiri-kanan jadi saya memutuskan untuk mencari solusi lain. Saya telah melampirkan foto untuk lebih memahami.
Tombol bootstrap drop-down di dalam tabel responsif tidak terlihat karena scroll
Jawaban:
Saya memecahkan sendiri ini dan saya meletakkan jawabannya dalam ruang lingkup untuk membantu pengguna lain yang memiliki masalah yang sama: Kami memiliki acara di bootstrap dan kami dapat menggunakan acara itu untuk mengatur overflow: inherittetapi ini akan berfungsi jika Anda tidak memiliki properti css pada orang tua Anda wadah.
$('.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: Dalam contoh biola ini berfungsi aneh dan saya tidak yakin mengapa tetapi dalam proyek saya berfungsi dengan baik.
3
Ini hanya berfungsi untuk tabel dengan dropdown di sel pertama baris.
—
Almino Melo
dalam kasus tabel yang dimuat dinamis:
—
Exlord
$('body') .on('show.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "visible"); }) .on('hide.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "auto"); });
Tetapi setelah diklik, data keluar dari ukuran minimum layar. Jadi ini tidak berhasil. !!!!
—
Shreya Shah
Ini akan berfungsi jika Anda dapat menghentikan tabel dari menggulir kembali ke kiri saat dropdown dibuka. Tetapi sebagaimana adanya, jika Anda memiliki dropdown di sebelah kanan layar, tabel tersentak ke kiri saat membuka. Dropdown yang berada jauh ke kanan (ditutupi oleh
—
Ponyboy
.table-responsivekelas) benar-benar tersembunyi saat mencoba mengeditnya.
Sebuah hanya CSS solusi adalah untuk memungkinkan sumbu y meluap.
http://www.bootply.com/YvePJTDzI0
.table-responsive {
overflow-y: visible !important;
}
EDIT
Solusi satu-satunya CSS adalah menerapkan luapan secara responsif berdasarkan lebar viewport:
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: inherit;
}
}
@ZimSystem Masih melakukan hal yang sama, pada dasarnya ini bukanlah solusi.
—
Jemar Jones
Solusi ini berfungsi bahkan jika Anda menghapus css kustom. Mungkin itu hal html. Saya masih mencari solusi khusus css.
—
Fernando
Tidak. Tidak berhasil. Saya rasa itu karena saya menggunakan tabel data
—
peterchaula
berfungsi untuk saya kecuali tombolnya ada di bagian bawah halaman ... lalu dropdown muncul di luar jendela ...
—
Brucie Alpha
Sebagai referensi, ini 2018 dan saya menggunakan BS4.1
Coba tambahkan data-boundary="viewport"ke tombol yang mengaktifkan dropdown (yang ada di kelas dropdown-toggle). Lihat https://getbootstrap.com/docs/4.1/components/dropdowns/#options
Saya mengonfirmasi bahwa ini adalah solusi yang berhasil saya buat juga.
—
sdvnksv
Saya tidak dapat berbicara untuk versi sebelumnya, tetapi untuk Bootstrap 4 ini benar-benar solusi terbaik. Sederhana, tidak mengorbankan daya tanggap, ia menggunakan fungsionalitas yang sudah disediakan dalam kerangka alih-alih mencoba meretasnya dengan gaya atau skrip tambahan.
—
T. Linnell
Saya telah mengambil pendekatan yang berbeda, saya telah melepaskan elemen dari induknya dan mengaturnya dengan posisi absolute oleh jQuery
Bekerja fidle JS: http://jsfiddle.net/s270Lyrd/
Solusi JS yang saya gunakan.
//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');
}
});
Solusi ini bekerja sangat baik untuk saya:
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: visible;
}
}
Detail lebih lanjut: https://github.com/twbs/bootstrap/issues/15374
2 ¢ perbaikan global cepat saya:
// 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);
})
})();
Penjelasan: Ketika menu dropdown di dalam '.table-responsive' ditampilkan, ia menghitung tinggi tabel dan meluaskannya (dengan padding) agar sesuai dengan ketinggian yang diperlukan untuk menampilkan menu. Menu bisa dalam berbagai ukuran.
Dalam kasus saya, ini bukan tabel yang memiliki kelas '.table-responsive', ini adalah div pembungkus:
<div class="table-responsive" style="overflow:auto;">
<table class="table table-hover table-bordered table-condensed server-sort">
Jadi $ table var di skrip sebenarnya adalah div! (hanya untuk memperjelas ... atau tidak) :)
Catatan: Saya membungkusnya dalam sebuah fungsi sehingga IDE saya dapat menciutkan fungsi;) tetapi itu tidak wajib!
Ini adalah satu-satunya solusi yang berhasil untuk saya, tetapi saya akan menyarankan menggunakan $ table.css ("padding-bottom", menuOffsetHeight - tableOffsetHeight + 16); insetad dari $ table.css ("padding-bottom", menuOffsetHeight - tableOffsetHeight); untuk menambahkan bantalan ekstra yang ada di bootstrap secara default, ditambah celah kecil di bagian bawah.
—
Phil Young
Ini berfungsi, tetapi bantalannya membuatnya terlihat buruk. Berharap ada solusi yang membuatnya bekerja tanpa bantalan yang membengkak.
—
Qasim
solusi yang bagus dan sederhana
—
NMC
Saya memiliki solusi hanya dengan menggunakan CSS, cukup gunakan relatif posisi untuk dropdown di dalam tabel-responsif:
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: relative; /* Sometimes needs !important */
}
}
ini adalah solusi terbaik, saya menggunakannya untuk ui-pilih di tabel responsif saya.
—
Sergio Ivanuzzo
Solusi terbaik juga untuk saya
—
Mauro
Ini biola tidak bekerja . Itu terus menyembunyikan dropdown di bawah tabel.
—
HelloIT
@HelloIT coba codepen (diperbarui) codepen.io/leocaseiro/pen/rKxmpz
—
Leo Caseiro
Setuju dengan @hellioIT metode ini tampaknya tidak berfungsi di pena
—
MrPaulDriver
Tentukan properti ini. Semoga berhasil!
data-toggle="dropdown" data-boundary="window"
Solusi khusus bootstrap 4
—
nevada_scout
Ini telah diperbaiki di Bootstrap v4.1 dan yang lebih baru dengan menambahkan data-boundary="viewport"( Bootstrap Dropdowns Docs )
Tetapi untuk versi sebelumnya (v4.0 dan yang lebih lama), saya menemukan potongan javascript ini yang berfungsi dengan sempurna. Ini berfungsi untuk tabel kecil dan tabel gulir:
$('.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': ''});
});
Sedikit membersihkan solusi @Wazime. Berfungsi bagus sebagai solusi umum.
$(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');
});
Solusi yang direkomendasikan dan dipilih, tidak selalu merupakan solusi terbaik. Sayangnya itu adalah solusi linkedin yang baru-baru ini digunakan dan itu membuat beberapa scrollbar pada halaman berdasarkan situasinya.
Metode saya sedikit berbeda.
Saya berisi div responsif tabel di div lain. Kemudian saya menerapkan tinggi 100%, lebar: 100%, blok tampilan dan posisi absolut sehingga tinggi dan lebar didasarkan pada ukuran halaman, dan mengatur overflow menjadi tersembunyi.
Kemudian pada tabel responsive div saya menambahkan 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%;">
Seperti yang Anda lihat pada contoh kerja di bawah ini, tidak ada bilah gulir tambahan, tidak ada perilaku lucu, dan praktis sebagai persentase penggunaannya - ini harus berfungsi terlepas dari ukuran layar. Saya belum menguji ini untuk itu. Jika gagal karena suatu alasan, seseorang dapat mengganti 100% dengan 100vh dan 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>
Bukan solusi untuk ketinggian tampilan yang lebih kecil. Tautan tarik-turun yang lebih rendah tidak lagi dapat dijangkau karena tidak terlihat.
—
Seika85
Berdasarkan jawaban yang diterima dan jawaban dari @LeoCaseiro, inilah yang akhirnya saya gunakan dalam kasus saya:
@media (max-width: 767px) {
.table-responsive{
overflow-x: auto;
overflow-y: auto;
}
}
@media (min-width: 767px) {
.table-responsive{
overflow: inherit !important; /* Sometimes needs !important */
}
}
di layar besar, dropdown tidak akan disembunyikan di belakang tabel-reponif dan di layar kecil akan disembunyikan tetapi tidak apa-apa karena ada scroll bar di ponsel.
Semoga ini bisa membantu seseorang.
Respons Burebistaruler berfungsi baik untuk saya di ios8 (iphone4s) tetapi tidak bekerja di android yang sebelumnya berfungsi. Apa yang saya lakukan yang bekerja untuk saya di ios8 (iphone4s) dan andoir adalah:
$('.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" );
})
Ini bisa berguna untuk orang lain. Saya menggunakan DatatablesJS. Saya menambahkan 500px ke ketinggian tabel saat ini. Saya melakukan ini karena Datatables memungkinkan Anda untuk menggunakan 10, 20, dll halaman dalam tabel Anda. Jadi saya perlu menghitung ketinggian meja secara dinamis.
Saat dropdown ditampilkan, saya menambahkan tinggi ekstra.
Saat dropdown disembunyikan, saya mengatur ulang tinggi tabel asli.
$(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");
})
})
Dan HTML
<div class="table-responsive" id="table-responsive-cliente">
<table class="table-striped table-hover">
....
....
</table>
</div>
Sebelum:
Setelah dropdown ditampilkan:
Kami memecahkan masalah ini di sini di tempat kerja dengan menerapkan kelas .dropup ke dropdown saat dropdown dekat dengan bagian bawah tabel. masukkan deskripsi gambar di sini
Saya sangat senang dengan solusi itu pada akhirnya.
—
Furgas
$('table tr:nth-last-child(-n+3) td').addClass('dropup').
Selama orang masih terjebak dalam masalah ini dan kita sudah berada di tahun 2020. Saya mendapatkan solusi CSS murni dengan memberikan menu drop-down tampilan yang fleksibel
potongan ini berfungsi baik dengan datatable-scroll-wrapkelas
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu {
display: flex;
}
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a {
display: flex;
}
Nah, membaca jawaban teratas, saya melihat bahwa itu benar-benar tidak berfungsi ketika Anda melihat bilah gulir dan tombol sakelar ada di kolom terakhir (dalam kasus saya) atau kolom lain yang tidak terlihat
Tapi, jika Anda mengubah 'mewarisi' menjadi 'tersembunyi' itu akan berhasil.
$('.table-responsive').on('show.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "hidden" );
}).on('hide.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "auto" );
})
Coba lakukan seperti itu.
Coba sekali. setelah 1 jam penelitian di internet saya menemukan Solusi Terbaik untuk Masalah ini.
Solusi: - cukup tambahkan skrip
(function () {
// hold onto the drop down menu
var dropdownMenu;
// and when you show it, move it to the body
$(window).on('show.bs.dropdown', function (e) {
// grab the menu
dropdownMenu = $(e.target).find('.dropdown-menu');
// detach it and append it to the body
$('body').append(dropdownMenu.detach());
// grab the new offset position
var eOffset = $(e.target).offset();
// make sure to place it where it would normally go (this could be improved)
dropdownMenu.css({
'display': 'block',
'top': eOffset.top + $(e.target).outerHeight(),
'left': eOffset.left
});
});
// and when you hide it, reattach the drop down, and hide it normally
$(window).on('hide.bs.dropdown', function (e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
})();
KELUARAN:-
Cukup Gunakan Ini
.table-responsive {
overflow: inherit;
}
Ini berfungsi di Chrome, tetapi tidak pada IE10 atau Edge karena properti warisan tidak didukung