wake-up-neo.com

Das Dropdown-Menü der Bootstrap-Schaltfläche in der responsiven Tabelle ist aufgrund des Bildlaufs nicht sichtbar

Ich habe ein Problem mit Dropdown-Schaltflächen in Tabellen, wenn reagierend und Bildlauf aktiv sind, da das Dropdown-Menü aufgrund der overflow: auto;-Eigenschaft 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 links-rechts habe, beschloss ich, eine andere Lösung zu finden ... Ich habe ein Foto angehängt, um es besser zu verstehen.enter image description here

Hier ist eine kleine Js-Geige:

59
BurebistaRuler

Ich habe dieses Problem gelöst und die Antwort in den Anwendungsbereich gestellt, um anderen Benutzern zu helfen, die dasselbe Problem haben: Wir haben ein Ereignis in bootstrap, und wir können dieses Ereignis verwenden, um overflow: inherited festzulegen. Dies funktioniert jedoch, wenn Sie keine css -Eigenschaft auf Ihrem übergeordneten Objekt haben 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 nicht sicher warum, aber in meinem Projekt funktioniert es gut.

50
BurebistaRuler

Eine Nur-CSS-Lösung ermöglicht das Überlaufen der y-Achse.

http://www.bootply.com/YvePJTDzI0

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

EDIT

Eine weitere Lösung, die nur CSS bietet, besteht darin, den Überlauf basierend auf der Breite des Ansichtsfensters ansprechend 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

36
Zim

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

Arbeitet JS Fidle: http://jsfiddle.net/s270Lyrd/

 enter image description here

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

Diese Lösung hat für mich funktioniert:

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

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

11
pcuong

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

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

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

9
Leo Caseiro

meine 2 ¢ schnelle globale Korrektur:

// 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 einem '.table-responsive' angezeigt wird, berechnen Sie die Höhe der Tabelle und erweitern Sie sie (mit Füllzeichen), um sie an die für die Anzeige des Menüs erforderliche Höhe anzupassen. Das Menü kann beliebig groß sein.

In meinem Fall ist dies nicht die Tabelle, die die Klasse '.table-responsive' hat, es handelt sich um 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 eigentlich ein div! (nur um klar zu sein ... oder nicht) :)

Hinweis: Ich wickle es in eine Funktion ein, damit meine IDE -Funktion die Funktion einklappen kann;), aber es ist nicht obligatorisch!

8
BaltazarQc

Als Referenz ist es 2018 und ich verwende BS4.1

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

5
Ben

Die empfohlene und gewählte Lösung ist nicht immer die beste Lösung. Leider ist dies die kürzlich von LinkedIn verwendete Lösung, 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, so dass Höhe und Breite auf der Seitengröße basieren und Überlauf auf ausgeblendet eingestellt sind. 

Dann habe ich auf dem Tisch responsive div eine Min-Hö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, gibt es keine zusätzlichen Bildlaufleisten, kein komisches Verhalten und praktisch die Verwendung von Prozentsätzen - es sollte unabhängig von der Bildschirmgröße funktionieren. Ich habe das aber nicht getestet. Wenn dies aus irgendeinem Grund fehlschlägt, kann man 100% durch 100 bzw. 100 Volt 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>

2
Bruce

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

Dies könnte für andere nützlich sein. Ich verwende DatatablesJS. Ich addiere 500px zur aktuellen Höhe des Tisches. Ich mache das, weil Datatables Ihnen erlaubt, 10, 20 usw. Seiten in Ihrer Tabelle zu verwenden. Ich muss also die Höhe des Tisches dynamisch berechnen. 
Wenn Dropdown angezeigt wird, füge ich zusätzliche Höhe hinzu.
Wenn das Dropdown-Menü ausgeblendet ist, setze ich die Höhe der ursprünglichen Tabelle 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 das HTML

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

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

Vor:  enter image description here

Nach dem Dropdown wird angezeigt:  enter image description here

0
miguel.angel

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

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

Die Antwort von Burebista Ruler funktioniert für mich auf ios8 (iphone 4s) in Ordnung, funktioniert aber nicht auf Android, das zuvor funktioniert hat .

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

Einfach das nutzen

.table-responsive {
    overflow: inherit;
}

Es funktioniert in Chrome, jedoch nicht in IE10 oder Edge, da die Eigenschaften zum Vererben nicht unterstützt werden

0
Deepak swain

Definieren Sie diese Eigenschaften. Viel Glück!

data-toggle="dropdown" data-boundary="window"
0
Halit Yeşil

Basierend auf der akzeptierten Antwort und der Antwort von @LeoCaseiro habe ich in meinem Fall letztendlich 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 dem Reponsive-Tisch versteckt, und auf kleinen Bildschirmen wird es ausgeblendet, ist aber in Ordnung, da es in Mobile ohnehin eine Bildlaufleiste gibt.

Hoffe das hilft jemandem.

0
medBouzid

Wir haben dieses Problem hier gelöst, indem wir eine Dropdown-Klasse auf die Dropdown-Liste angewendet haben, wenn sich die Dropdown-Liste am Ende einer Tabelle befindet . Bildbeschreibung hier eingeben

0
roshin jose