Dropdown Bootstrap disembunyikan oleh tabel data

Saya menggunakan Twitter Bootstrap untuk membuat tombol dengan menu DropDown untuk setiap baris di grid DataTables, tetapi wadah data dari DataTables menggunakan "overflow: tersembunyi" yang membuat DropDown terpotong.

Saya tidak bisa begitu saja beralih ke "overflow: auto" karena ini akan menyebabkan munculnya scrollbar vertikal yang tidak perlu.

Ini adalah JSFiddle

HTML

<table cellpadding="0" cellspacing="0" border="0" class="pretty" id="example"></table>

JS

/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
    return {
        "iStart": oSettings._iDisplayStart,
            "iEnd": oSettings.fnDisplayEnd(),
            "iLength": oSettings._iDisplayLength,
            "iTotal": oSettings.fnRecordsTotal(),
            "iFilteredTotal": oSettings.fnRecordsDisplay(),
            "iPage": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
            "iTotalPages": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
    };
}

/* Bootstrap style pagination control */
$.extend($.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function (oSettings, nPaging, fnDraw) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function (e) {
                e.preventDefault();
                if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
                    fnDraw(oSettings);
                }
            };

            $(nPaging).addClass('pagination').append(
                '<ul>' +
                '<li class="prev disabled"><a href="/id#">&larr; ' + oLang.sPrevious + '</a></li>' +
                '<li class="next disabled"><a href="/id#">' + oLang.sNext + ' &rarr; </a></li>' +
                '</ul>');
            var els = $('a', nPaging);
            $(els[0]).bind('click.DT', {
                action: "previous"
            }, fnClickHandler);
            $(els[1]).bind('click.DT', {
                action: "next"
            }, fnClickHandler);
        },

            "fnUpdate": function (oSettings, fnDraw) {
            var iListLength = 5;
            var oPaging = oSettings.oInstance.fnPagingInfo();
            var an = oSettings.aanFeatures.p;
            var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);

            if (oPaging.iTotalPages < iListLength) {
                iStart = 1;
                iEnd = oPaging.iTotalPages;
            } else if (oPaging.iPage <= iHalf) {
                iStart = 1;
                iEnd = iListLength;
            } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
                iStart = oPaging.iTotalPages - iListLength + 1;
                iEnd = oPaging.iTotalPages;
            } else {
                iStart = oPaging.iPage - iHalf + 1;
                iEnd = iStart + iListLength - 1;
            }

            for (i = 0, iLen = an.length; i < iLen; i++) {
                // Remove the middle elements
                $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                // Add the new list items and their event handlers
                for (j = iStart; j <= iEnd; j++) {
                    sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
                    $('<li ' + sClass + '><a href="/id#">' + j + '</a></li>')
                        .insertBefore($('li:last', an[i])[0])
                        .bind('click', function (e) {
                        e.preventDefault();
                        oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
                        fnDraw(oSettings);
                    });
                }

                // Add / remove disabled classes from the static elements
                if (oPaging.iPage === 0) {
                    $('li:first', an[i]).addClass('disabled');
                } else {
                    $('li:first', an[i]).removeClass('disabled');
                }

                if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
                    $('li:last', an[i]).addClass('disabled');
                } else {
                    $('li:last', an[i]).removeClass('disabled');
                }
            }
        }
    }
});

/* Table initialisation */
$(document).ready(function () {
    $('#example').dataTable({
        "aaData": [
        /* Reduced data set */ ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="/id#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="/id#">Approve</a></li>' +
                                    '<li><a href="/id#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="/id#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="/id#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 4.0", "Win 95+", 4, "X"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="/id#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="/id#">Approve</a></li>' +
                                    '<li><a href="/id#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="/id#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="/id#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 5.0", "Win 95+", 5, "C"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="/id#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="/id#">Approve</a></li>' +
                                    '<li><a href="/id#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="/id#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="/id#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 5.5", "Win 95+", 5.5, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="/id#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="/id#">Approve</a></li>' +
                                    '<li><a href="/id#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="/id#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="/id#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 6.0", "Win 98+", 6, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="/id#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="/id#">Approve</a></li>' +
                                    '<li><a href="/id#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="/id#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="/id#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 7.0", "Win XP SP2+", 7, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="/id#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="/id#">Approve</a></li>' +
                                    '<li><a href="/id#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="/id#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="/id#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="/id#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="/id#">Approve</a></li>' +
                                    '<li><a href="/id#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="/id#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="/id#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="/id#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="/id#">Approve</a></li>' +
                                    '<li><a href="/id#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="/id#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="/id#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A"]
        ],
            "aoColumns": [{
            "sTitle": "Engine"
        }, {
            "sTitle": "Browser"
        }, {
            "sTitle": "Platform"
        }, {
            "sTitle": "Version",
            "sClass": "center"
        }, {
            "sTitle": "Grade",
            "sClass": "center"
        }],

            'sScrollX': "100%",
            'sScrollXInner': "150%",
            'bScrollCollapse': true,
            'bAutoWidth': false,
            'bDeferRender': true,
            'bLengthChange': false, "sPaginationType": "bootstrap",
            "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });
    $('.acoes').dropdown();
});

twitter-bootstrap datatables
person Juliano Nunes Silva Oliveira    schedule 09.08.2013    source sumber
comment
Saya tidak yakin apakah saya rindu memahami Anda, tapi saya rasa saya tidak memiliki masalah seperti itu: chrpics.eu.pn/view.php?file=user/ Apakah dropdown itu yang Anda maksud?   -  person chris-l    schedule 09.08.2013
comment
@chris Klik tombol di baris terakhir.   -  person Juliano Nunes Silva Oliveira    schedule 09.08.2013
comment
Oke, seperti ini: chrpics.eu.pn/view.php ?file=user/ (Saya tidak mengubah apa pun dari biola Anda, btw)   -  person chris-l    schedule 09.08.2013
comment
Inilah yang terjadi jika saya tidak menggunakan scrollbar bagian dalam untuk turun: s2.postimg.org /41polkiuh/Capture.png . Masalahnya adalah meskipun dengan 3 baris data dan banyak ruang untuk digunakan, DataTables menentukan ketinggian tetap yang menyebabkan scrollbar tidak diperlukan.   -  person Juliano Nunes Silva Oliveira    schedule 09.08.2013
comment
Bagaimana kalau menggunakan overflow: visible; seperti ini jsfiddle.net/sulfureous/QAjwK ?   -  person sulfureous    schedule 09.08.2013
comment
kemungkinan duplikat: stackoverflow.com/ pertanyaan/12865807/   -  person Cole Johnson    schedule 09.08.2013
comment
@ColeCole9Johnson ya? jika Anda membaca pertanyaannya, dia menyebutkan tautan itu.   -  person chris-l    schedule 09.08.2013
comment
@ Chris saya tahu. Maksudku, hanya karena pertanyaan itu tidak mempunyai jawaban bukan berarti tidak apa-apa untuk mengajukan pertanyaan, tapi diubah agar sesuai dengan situasimu.   -  person Cole Johnson    schedule 09.08.2013

Jawaban (5)


arrow_upward
5
arrow_downward

Oke, setelah komentar yang kami berikan, saya menyadari apa yang Anda inginkan:

Anda memiliki elemen <div> dengan overflow:auto, dan Anda ingin elemen di dalam <div> tersebut (yang <ul> di mana menu berada), "melarikan diri" dari aturan luapan dan tampak mengambang, menggantikan aturan overflow dari leluhurnya.

Namun saya khawatir hal itu tidak mungkin. Hal terdekat yang dapat Anda lakukan adalah:

  • Gunakan javascript untuk membuat <ul> dengan menu di luar <div> dengan overflow:auto, lalu gunakan position absolute untuk menyetelnya ke tempat yang seharusnya, atau
  • Gunakan javascript untuk menggulir otomatis ke bagian bawah setelah menu tarik-turun tersebut diaktifkan, dengan menambahkan sesuatu seperti pendengar acara ke tarik-turun terakhir.

Opsi kedua nampaknya lebih elegan dan tidak terlalu 'hackish'. (Secara pribadi saya akan mengabaikan masalah itu, tetapi jika saya harus memilih, saya akan memilih opsi kedua)

person chris-l    schedule 09.08.2013
comment
Saya memutuskan untuk menonaktifkan opsi gulir DataTables, tetapi saran Anda juga akan membantu saya. - person Juliano Nunes Silva Oliveira; 13.08.2013
comment
Saya menulis dua contoh dari kedua proposal: - Pindah ke luar: jsfiddle.net/Sc9r3/1 - Gulir : jsfiddle.net/5TNvU/2 - person Marc; 13.03.2014
comment
@Marc : Ini saran yang sangat bagus, Tapi menurut saya ini tidak berfungsi sempurna dengan Safari Browser Terbaru. Saat memuat halaman pertama kali, muncul dengan sempurna, lalu diklik berikutnya, bagian atas & kiri Menu berubah. Dan menurut saya lain kali posisi menu = puncak terakhir + tinggi menu ... - person Khilen Maniyar; 02.02.2015
comment
@Marc, Anda harus menuliskannya sebagai jawaban, karena ini berfungsi dengan baik. Hanya satu hal yang perlu diperhatikan untuk pengunjung selanjutnya - ada konflik antara bootstrap.js dan js yang menyertakan bootstrap DataTables yang menyebabkan acara hide diaktifkan segera setelah acara show, sehingga menu tidak ditampilkan. Untuk menghindari hal ini, jangan sertakan bootstrap js secara bersamaan dengan tabel data. - person Aaron D; 17.05.2016

arrow_upward
8
arrow_downward

Saya mendapat masalah yang sama! Menyelesaikan penghapusan properti overflow di komponen.css

.table-scrollable {
  width: 100%;
/*  overflow-x: auto;
  overflow-y: hidden;*/
  border: 1px solid #dddddd;
  margin: 10px 0 !important;
}

Atau tambahkan ke custom.css Anda (disebut setelah bootstrap)

.table-scrollable { 
    overflow-x: visible; 
    overflow-y: visible; 
}
person kesm0    schedule 03.06.2014
comment
Atau tambahkan ke custom.css Anda (disebut setelah bootstrap) .table-scrollable { overflow-x: visibel; overflow-y: terlihat; } - person kesm0; 23.09.2014
comment
bekerja untuk saya mode inline <style>...</style> tepat sebelum deklarasi <table>. - person Meloman; 13.06.2017
comment
Jawaban yang luar biasa! Cukup hapus overflow: auto; dan sekarang baik-baik saja! - person Ozan Kurt; 15.10.2018

arrow_upward
6
arrow_downward

Ini berhasil untuk saya: Datatable + header tetap + dropdown bootstrap di header

.dataTables_scrollHead{
    overflow: visible !important;
}

Ditambahkan ke css khusus setelah yang lainnya

person Eric V.    schedule 20.01.2016
comment
Setelah pencarian yang panjang, temukan ini dan berhasil !! TISM :) - person Urvashi Bhatt; 08.06.2018

arrow_upward
1
arrow_downward

Yang berhasil bagi saya adalah menyesuaikan posisi menu dropdown Bootstrap ke fixed dan memindahkan menu ke bagian tertentu di layar.

Dan ini berfungsi dengan tampilan seluler karena relatif terhadap jendela.

table .dropdown-menu {
    position: fixed !important;
    top: 50% !important;
    left: 92% !important;
    transform: translate(-92%, -50%) !important;
}

Dengan cara ini Anda dapat menjaga perilaku properti ekstensi scroller, scrollX dan scrollY dari DataTables.

Hasil

person HMZ    schedule 23.05.2021

arrow_upward
0
arrow_downward

Ganti aturan css DataTable untuk pemilih .dataTables_scrollHead berfungsi untuk saya

.dataTables_scrollHead{
    position: static !important;
}
person Jonathas Morais    schedule 30.08.2013