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

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.

Hier ist eine kleine js Geige:

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.

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

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

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/

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');
    }
});

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

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!

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/

Definieren Sie diese Eigenschaften. Viel Glück!

data-toggle="dropdown" data-boundary="window"

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': ''});
});

@ 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');
});

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>

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.

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

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:

Nach dem Dropdown wird angezeigt:

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

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

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

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;
}

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

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

Versuchen Sie es so.

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%;
}

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

In meinem Fall funktioniert das gut:

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