Bootstrap ist dropdown versteckt von datatables

Ich bin mit Twitter Bootstrap erstellen Sie eine Schaltfläche mit einer DropDown-Menü für jede Zeile in einer DataTables-raster, sondern die Daten-container von DataTables ist mit "overflow: hidden" was macht der DropDown-Liste geschnitten werden.

Ich kann nicht einfach den Schalter auf "overflow: auto", da dies zu erscheinen, einen unnötigen vertikalen Scrollbalken.

Hier ist ein JSFiddle

HTML

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

/* 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="#">&larr; ' + oLang.sPrevious + '</a></li>' +
                '<li class="next disabled"><a href="#">' + 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="#">' + 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="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" 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="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" 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="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" 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="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" 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="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" 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="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" 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="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" 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="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" 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();
});

Ich bin mir nicht sicher, ob ich vermisse dich verstehen, aber ich glaube, ich habe nicht dieses problem: chrpics.eu.pn/anzeigen.php?Datei=user/... Ist, dass die dropdown-was bedeutet Sie?
Klicken Sie auf die Schaltfläche in der letzten Zeile.
Ok, so wie hier: chrpics.eu.pn/anzeigen.php?Datei=user/... (ich habe nichts verändert, von Ihrem fiddle, btw)
Hier ist, was passiert, wenn ich nicht die innere Bildlaufleiste nach unten gehen: s2.postimg.org/41polkiuh/Capture.png . Das problem ist, dass selbst mit 3 Reihen von Daten und viel Raum zu nutzen, Datentabellen definiert eine Feste Höhe, die bewirkt, dass unnötige Scrollbalken.
Wie wäre es mit overflow: visible; wie diese jsfiddle.net/sulfureous/QAjwK ?
mögliche Duplikate von: stackoverflow.com/questions/12865807/...
hm? wenn Sie Las seine Frage, er hat erwähnt, dass link.
Ich weiß. Ich sage, nur weil diese Frage nicht eine Antwort haben, bedeutet nicht, es ist ok, sich die Frage zu stellen, aber geändert, um Ihre situation anpassen.

InformationsquelleAutor Juliano Nunes Silva Oliveira | 2013-08-09

datatables twitter-bootstrap

2

Ok, nach den Kommentaren, die wir hatten, ich erkannte das, was Sie wollen:

Haben Sie eine <div> element mit overflow:auto wird, und Sie möchten, dass ein element im inneren des <div> (die <ul> wo das Menü ist), zu "Flucht" aus dem überlauf Regel und erscheinen, schweben, das überschreiben der überlauf in der Regel von seinen Vorfahren.

Aber ich fürchte, dass ist nicht möglich. Die nächste Sache, die Sie tun können, ist:
- Verwendung von javascript zum erstellen der <ul> mit dem Menü außerhalb die <div> mit overflow:auto, und verwenden Sie dann position absolut zu setzen, wo es hin soll, oder
- Javascript verwenden, um auto-scroll unten, sobald das dropdown-Menü aktiviert ist, indem etwas wie ein Ereignis-listener hinzu, der die Letzte dropdown-Liste.
Die zweite option scheint eleganter und weniger "hackish'. (Persönlich würde ich einfach ignorieren das problem, aber wenn ich wählen, würde ich für die zweite option)
- Ich löste deaktivieren Sie die scrolling-option von DataTables, aber dein Vorschlag wäre mir zu helfen.
- Ich schrieb zwei Proben von den beiden Vorschlägen: - Bewegen außerhalb: jsfiddle.net/Sc9r3/1 - Blättern: jsfiddle.net/5TNvU/2
- Das ist wirklich eine gute Anregung, Aber ich fand, dass es nicht perfekt mit dem Neuesten Safari Browser. Beim laden der ersten Seite der Zeit, es popup-perfekt, dann auf das nächste mal, oben & Links im Menü geändert wird. Und ich denke das nächste mal die position des Menü = Letzte oben + Höhe der im Menü ...
- Sie sollten schreiben, dass er so eine Antwort, wie es funktioniert gut. Nur eine Sache zu beachten für zukünftige Besucher - es ist ein Konflikt zwischen bootstrap.js und DataTables-bootstrap-js, die bewirkt, dass der hide-Ereignis ausgelöst werden, sofort nach der show-Veranstaltung, so dass das Menü nicht angezeigt bekommt. Um dies zu vermeiden, zählen Sie nicht das bootstrap-js zur gleichen Zeit wie die Datentabellen.
InformationsquelleAutor chris-l
7

Ich hab das gleiche problem ! Gelöst entfernen überlauf Eigenschaften der Komponente.css
```
.table-scrollable {
  width: 100%;
/*  overflow-x: auto;
  overflow-y: hidden;*/
  border: 1px solid #dddddd;
  margin: 10px 0 !important;
}
```
Oder fügen Sie Ihre benutzerdefinierte.css (genannt nach bootstrap)
```
.table-scrollable { 
    overflow-x: visible; 
    overflow-y: visible; 
}
```
- sich das funktionierte für mich zu
- Oder fügen Sie Ihre benutzerdefinierte.css (genannt nach bootstrap) .Tisch-Scrollbar { overflow-x: visible; overflow-y: visible; }
- bei mir funktioniert der inline-Modus <style>...</style> kurz vor der <table> Erklärung.
- Erstaunliche Antwort! Entfernt einfach overflow: auto; und es ist gut jetzt!
- Funktioniert Super, danke!
InformationsquelleAutor kesm0
5

Dieser arbeitete für mich : Datatable + festen Header + bootstrap-dropdown in header
```
.dataTables_scrollHead{
    overflow: visible !important;
}
```
Hinzugefügt benutzerdefinierte css nach allen anderen
- Nach langer Suche gefunden und Es funktionierte !! TYSM 🙂
InformationsquelleAutor Eric V.
0

Überschreiben DataTable css-Regel für die .dataTables_scrollHead-Selektor für mich gearbeitet
```
.dataTables_scrollHead{
    position: static !important;
}
```
- Sie löste mein Tag!
InformationsquelleAutor Jonathas Morais

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.