Das Dropdown-Menü für die Bootstrap-Schaltfläche in der reaktionsfähigen Tabelle ist aufgrund des Bildlaufs nicht sichtbar

86

Ich habe ein Problem mit Dropdown-Schaltflächen in Tabellen, wenn diese reagieren und aktiv scrollen, da das Dropdown-Menü aufgrund von overflow: auto;Eigenschaften nicht sichtbar ist . Wie kann ich das beheben, um die Dropdown-Option der Schaltfläche anzuzeigen, wenn diese reduziert ist? Ich kann etwas jQuery verwenden, aber nachdem ich Probleme mit dem Scrollen von links nach rechts habe, habe ich beschlossen, eine andere Lösung zu finden. Ich habe ein Foto angehängt, um es besser zu verstehen.Geben Sie hier die Bildbeschreibung ein

Hier ist eine kleine js Geige:

BurebistaRuler
quelle

Antworten:

60

Ich habe dieses Problem selbst gelöst und die Antwort in den Geltungsbereich gestellt, um anderen Benutzern mit demselben Problem zu helfen: Wir haben ein Ereignis im Bootstrap und können dieses Ereignis zum Festlegen verwenden. overflow: inheritDies funktioniert jedoch, wenn Sie nicht über die CSS-Eigenschaft Ihres übergeordneten Elements verfügen Container.

$('.table-responsive').on('show.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "inherit" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "auto" );
})

und das ist die Geige

info: In diesem Geigenbeispiel funktioniert es seltsam und ich bin mir nicht sicher warum, aber in meinem Projekt funktioniert es einwandfrei.

BurebistaRuler
quelle
3
Dies funktioniert nur für Tabellen mit einem Dropdown-Menü in der ersten Zelle der Zeile.
Almino Melo
6
im Falle einer dynamisch geladenen Tabelle: $('body') .on('show.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "visible"); }) .on('hide.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "auto"); });
Exlord
4
Nach dem Klicken gehen die Daten jedoch außerhalb der Mindestgröße des Bildschirms. Das funktioniert also nicht. !!!!
Shreya Shah
1
Dies würde funktionieren, wenn Sie verhindern könnten, dass die Tabelle beim Öffnen der Dropdown-Liste nach links zurückblättert. Wenn Sie jedoch ein Dropdown-Menü rechts auf dem Bildschirm haben, ruckelt die Tabelle beim Öffnen nach links. Dropdowns, die sich ganz rechts befinden (von der .table-responsiveKlasse maskiert ), werden beim Bearbeiten vollständig ausgeblendet.
Ponyboy
43

Eine reine CSS- Lösung besteht darin, die y-Achse überlaufen zu lassen.

http://www.bootply.com/YvePJTDzI0

.table-responsive {
  overflow-y: visible !important;
}

BEARBEITEN

Eine andere reine CSS-Lösung besteht darin, den Überlauf basierend auf der Breite des Ansichtsfensters reaktionsschnell anzuwenden:

@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

Zim
quelle
@ZimSystem macht immer noch das Gleiche, dies ist im Grunde nicht die Lösung.
Jemar Jones
Diese Lösung funktioniert auch, wenn Sie das benutzerdefinierte CSS entfernen. Vielleicht ist es eine HTML-Sache. Ich bin immer noch auf der Suche nach einer Nur-CSS-Lösung.
fernandodof
1
Funktioniert nicht. Ich denke, es liegt daran, dass ich Datentabellen verwende
Peterchaula
funktioniert für mich, außer dass sich die Schaltfläche unten auf der Seite befindet ... dann erscheint das Dropdown außerhalb des Fensters ...
Brucie Alpha
30

Als Referenz ist es 2018 und ich verwende BS4.1

Versuchen Sie data-boundary="viewport", der Schaltfläche, mit der das Dropdown-Menü umgeschaltet wird (die mit der Klasse dropdown-toggle), etwas hinzuzufügen . Siehe https://getbootstrap.com/docs/4.1/components/dropdowns/#options

Ben
quelle
4
Ich bestätige, dass dies auch eine funktionierende Lösung ist, die ich mir ausgedacht habe.
SDVNKSV
4
Ich kann nicht für frühere Versionen sprechen, aber für Bootstrap 4 ist dies wirklich die beste Lösung. Es ist einfach, es beeinträchtigt nicht die Reaktionsfähigkeit, es verwendet Funktionen, die bereits im Framework bereitgestellt werden, anstatt zu versuchen, es mit zusätzlichen Stilen oder Skripten zu umgehen.
T. Linnell
16

Ich hatte einen anderen Ansatz gewählt, das Element vom übergeordneten Element getrennt und es von jQuery auf die absolute Position gesetzt

Arbeitendes JS-Fidle: http://jsfiddle.net/s270Lyrd/

Geben Sie hier die Bildbeschreibung ein

Die JS-Lösung, die ich verwende.

//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');
    }
});
Wazime
quelle
1
Diese Antwort ist für mich die perfekte Lösung, wenn ich jquery datatable (Ajax-Rendering) verwende. Ich habe mich entsprechend angepasst und es funktioniert super.
13

Diese Lösung hat bei mir hervorragend funktioniert:

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

Weitere Details: https://github.com/twbs/bootstrap/issues/15374

Pham Cuong
quelle
11

meine 2 ¢ schnelle globale Lösung:

// 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);
  })
})();

Erläuterungen: Wenn ein Dropdown-Menü in einer '.table-responsive' angezeigt wird, berechnet es die Höhe der Tabelle und erweitert sie (mit Auffüllung), um der Höhe zu entsprechen, die für die Anzeige des Menüs erforderlich ist. Das Menü kann beliebig groß sein.

In meinem Fall ist dies nicht die Tabelle mit der Klasse '.table-responsive', sondern ein Wrapping-Div:

<div class="table-responsive" style="overflow:auto;">
    <table class="table table-hover table-bordered table-condensed server-sort">

Die $ table var im Skript ist also tatsächlich ein div! (nur um klar zu sein ... oder nicht) :)

Hinweis: Ich verpacke es in eine Funktion, damit meine IDE die Funktion reduzieren kann;) aber es ist nicht obligatorisch!

BaltazarQc
quelle
2
Dies ist die einzige Lösung, die für mich funktioniert hat, aber ich würde vorschlagen, $ table.css zu verwenden ("padding-bottom", menuOffsetHeight - tableOffsetHeight + 16); Einschub von $ table.css ("padding-bottom", menuOffsetHeight - tableOffsetHeight); um zusätzliche Polsterung hinzuzufügen, die standardmäßig auf dem Bootstrap ist, sowie eine kleine Lücke unten.
Phil Young
Dies funktioniert, aber die Polsterung lässt es schlecht aussehen. Ich wünschte, es gäbe eine Lösung, mit der die Polsterung ohne Aufblähen funktioniert.
Qasim
schöne und einfache Lösung
NMC
11

Ich habe eine Lösung, die nur CSS verwendet. Verwenden Sie nur die relative Position für Dropdowns innerhalb der Tabelle:

@media (max-width: 767px) {
  .table-responsive .dropdown-menu {
    position: relative; /* Sometimes needs !important */
  }
}

https://codepen.io/leocaseiro/full/rKxmpz/

Leo Caseiro
quelle
1
Dies ist die beste Lösung. Ich verwende sie für die UI-Auswahl in meiner Antworttabelle.
Sergio Ivanuzzo
Beste Lösung auch für mich
Mauro
2
Diese Geige funktioniert nicht . Es versteckt immer wieder das Dropdown unter dem Tisch.
HelloIT
@ HalloIT versuchen Sie den Codepen (aktualisiert) codepen.io/leocaseiro/pen/rKxmpz
Leo Caseiro
1
Stimmen Sie mit @hellioIT überein, diese Methode scheint nicht im Stift zu funktionieren
MrPaulDriver
9

Definieren Sie diese Eigenschaften. Viel Glück!

data-toggle="dropdown" data-boundary="window"
Halit Yeşil
quelle
3
Nur Bootstrap 4 Lösung
nevada_scout
5

Dies wurde in Bootstrap v4.1 und höher durch Hinzufügen von data-boundary="viewport"( Bootstrap Dropdowns Docs ) behoben.

Aber für frühere Versionen (v4.0 und niedriger) habe ich dieses Javascript- Snippet gefunden , das perfekt funktioniert. Es funktioniert für kleine Tabellen und Bildlauftabellen:

$('.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': ''});
});
Cyrus V.
quelle
4

@ Wazime-Lösung ein wenig aufgeräumt. Funktioniert hervorragend als allgemeine Lösung.

$(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');
});
Beben
quelle
2

Die empfohlene und gewählte Lösung ist nicht immer die beste Lösung. Leider ist es die Lösung, die Linkedin kürzlich verwendet hat, und es werden je nach Situation mehrere Bildlaufleisten auf der Seite erstellt.

Meine Methode war etwas anders.

Ich habe das auf Tabellen reagierende Div in einem anderen Div enthalten. Dann habe ich Höhe 100%, Breite: 100%, Anzeigeblock und Position absolut angewendet, sodass Höhe und Breite auf der Seitengröße basieren, und den Überlauf auf ausgeblendet gesetzt.

Dann habe ich auf dem Tisch Responsive Div eine Mindesthöhe von 100% hinzugefügt

<div class="table_container" 
    style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">

Wie Sie im folgenden Arbeitsbeispiel sehen können, keine hinzugefügten Bildlaufleisten, kein lustiges Verhalten und praktisch die Verwendung von Prozentsätzen - es sollte unabhängig von der Bildschirmgröße funktionieren. Ich habe dies jedoch nicht dafür getestet. Wenn dies aus irgendeinem Grund fehlschlägt, kann man 100% durch 100vh bzw. 100vw ersetzen.

<!-- 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>

Bruce
quelle
Keine Lösung für kleinere Ansichtshöhen. Die unteren Dropdown-Links sind aufgrund von Unsichtbarkeit nicht mehr erreichbar.
Seika85
1

Basierend auf der akzeptierten Antwort und der Antwort von @LeoCaseiro habe ich Folgendes in meinem Fall verwendet:

@media (max-width: 767px) {
    .table-responsive{
        overflow-x: auto;
        overflow-y: auto;
    }
}
@media (min-width: 767px) {
    .table-responsive{
        overflow: inherit !important; /* Sometimes needs !important */
    }
}

Auf großen Bildschirmen wird das Dropdown-Menü nicht hinter der Antworttabelle versteckt, und auf kleinen Bildschirmen wird es ausgeblendet, aber es ist in Ordnung, da es auf Mobilgeräten sowieso eine Bildlaufleiste gibt.

Hoffe das hilft jemandem.

medBouzid
quelle
0

Burebistaruler Antwort funktioniert in Ordnung für mich auf ios8 (iphone4s), aber Woks auf Android, die vorher funktionierte. Was ich nicht getan habe, funktioniert für mich auf ios8 (iphone4s) und andoir ist:

$('.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" );
})
Oscar Jofre
quelle
0

Dies könnte für jemand anderen nützlich sein. Ich benutze DatatablesJS. Ich addiere 500px zur aktuellen Höhe der Tabelle. Ich mache das, weil Sie mit Datatables 10, 20 usw. Seiten in Ihrer Tabelle verwenden können. Also muss ich die Höhe des Tisches dinamisch berechnen.
Wenn Dropdown angezeigt wird, füge ich zusätzliche Höhe hinzu.
Wenn das Dropdown-Menü ausgeblendet ist, setze ich die Höhe des Originaltisches zurück.

$(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");
    })
})

Und der HTML

<div class="table-responsive" id="table-responsive-cliente">
    <table class="table-striped table-hover">
     ....

     ....
    </table>
</div>

Vor: Geben Sie hier die Bildbeschreibung ein

Nach dem Dropdown wird angezeigt: Geben Sie hier die Bildbeschreibung ein

Miguel Angel
quelle
0

Wir haben dieses Problem hier bei der Arbeit gelöst, indem wir eine .dropup-Klasse auf das Dropdown-Menü angewendet haben, wenn sich das Dropdown-Menü am unteren Rand einer Tabelle befindet. Geben Sie hier die Bildbeschreibung ein

Roshin Jose
quelle
Am Ende bin ich mit dieser Lösung am zufriedensten. $('table tr:nth-last-child(-n+3) td').addClass('dropup').
Furgas
0

Dies funktionierte für mich in Bootstrap 4, da es andere Haltepunkte als v3 hat:

@media (min-width: 992px) {
    .table-responsive {
        overflow: inherit;
    }
}
ar31an
quelle
0

Solange die Leute noch in dieser Ausgabe stecken und wir schon im Jahr 2020 sind. Ich erhalte eine reine CSS-Lösung, indem ich dem Dropdown-Menü eine flexible Anzeige gebe

Dieses Snippet funktioniert hervorragend mit datatable-scroll-wrapKlasse

.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu {
    display: flex;
}
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a {
    display: flex;
}
Hassan
quelle
0

Nun, als ich die oberste Antwort las, sah ich, dass es wirklich nicht funktioniert, wenn Sie die Bildlaufleiste sehen und sich die Umschalttaste in der letzten Spalte (in meinem Fall) oder einer anderen Spalte befindet, die nicht sichtbar ist

Bildfehler

Wenn Sie jedoch "erben" in "versteckt" ändern, funktioniert dies.

$('.table-responsive').on('show.bs.dropdown', function () {
    $('.table-responsive').css( "overflow", "hidden" );
}).on('hide.bs.dropdown', function () {
    $('.table-responsive').css( "overflow", "auto" );
})

Geben Sie hier die Bildbeschreibung ein

Versuchen Sie es so.

Luís Gustavo Batista
quelle
-1

Suchen Sie in bootstrap.css nach dem nächsten Code:

.fixed-table-body {
  overflow-x: auto;
  overflow-y: auto;
  height: 100%;
}

... und damit aktualisieren:

.fixed-table-body {
  overflow-x: visible;
  overflow-y: visible;
  height: 100%;
}
Cesar
quelle
-1

Verwenden Sie dies einfach

.table-responsive {
    overflow: inherit;
}

Es funktioniert unter Chrome, jedoch nicht unter IE10 oder Edge, da die Eigenschaft erben nicht unterstützt wird

Deepak Swain
quelle
-1

In meinem Fall funktioniert das gut:

.table-responsive {
  overflow-y: visible !important;
}
Hamid
quelle