Relative Positioniert Bootstrap Dropdown innerhalb Button-Group

Question

Ich habe eine Reihe von Tasten, die jeweils in einer eigenen Taste Gruppenklasse mit einem Drop-Down-Menü:

ich viel Stack-Überlauf und Google Links gescheuert haben. Ich habe versucht, den Z-Index auf einen höheren Wert zu ändern, habe versucht, das CSS-Positionsattribut zu ändern, und habe sogar die Größe des Container-DIV mit einer onclick-Methode geändert, die nicht so gut funktioniert.

Wenn eine Schaltfläche angeklickt wird, möchte ich das div, in dem die Schaltflächen leben, um die Größe ändern. Um dies zu tun, müssen das div und das dropdown relativ sein (scheint der einfachste Weg zu sein). Wie Sie sehen, ändert sich die div-Größe, aber alle Schaltflächengruppen sind auch relativ, also bewegen sie sich auch.

Ich möchte das Dropdown-Menü direkt unter der Schaltfläche, zu der es gehört, und andere Tasten bei Bedarf überlappen, ohne ihre Position zu beeinflussen. Ich kopierte eine JS Fiddle von another user, die mein Problem zeigt: Die zweite Schaltfläche wird verschoben, wenn das Dropdown-Menü der ersten Schaltfläche geöffnet ist (dieser Benutzer war an einer anderen Funktion interessiert).

Ich muss heute zu einem anderen Projekt übergehen und habe nicht viel Zeit, die ich jetzt widmen kann, irgendwelche Tipps werden geschätzt, um mich auf den richtigen Weg zu bringen. -Code, der in der JSFiddle verwendet wird:

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <h2 class="bold">Scrollable Menu</h2> 
      <div class="btn-group"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Scrollable Menu <span class="caret"></span></button> 
       <ul class="dropdown-menu scroll-menu" role="menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
       </ul> 
      </div> 
      <div class="btn-group"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Non Scrollable Menu <span class="caret"></span></button> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

Ziel:

UPDATE sieht aus wie auf Seite der Dropdown-Listen laden (die 'ul' Elemente mit scrollbaren-Menü-Klasse) haben bereits ihre Höheninformationen gespeichert

auf Dokument bereit ist, wenn i lo op durch und erstellen alle diese Elemente mit diesem Code:

$("#buttonBody").append('<div class="btn-group"> 
<button id='+state+' type="button" onclick=resize(this.id) style="border-radius:24px;" 
    class="btn btn-lg btn-primary dropdown-toggle" data-toggle="dropdown">'+state+'<span class="caret"></span></button> 
<ul id="'+state+'dropdown" role="menu" class="dropdown-menu scrollable-menu" style="max-height:200px; height:auto; overflow-y:scroll;" aria-labelledby="'+state+'"></ul> 
</div>'); 

ich Schleife durch und ‚li‘ Elemente anhängen, um die Dropdown-Listen zu füllen.

Answer 1

Damit das div-Element seine Größe aktualisieren kann, müssen das scrollbare Menü und das div auf position: relative; festgelegt werden. Die Knöpfe in meinem Fall haben auch eine relative Position, daher wurde ihre Position zusammen mit dem div verzerrt.

Um eine Abhilfe zu bekommen habe ich eine OnClick Funktion zu den Tasten:

resize(dropdownId){ 
    var dropdownHeight = $(dropdownId).height(); 
    var totalHeight = originalDivHeightAfterPageLoad + dropdownHeight + 
     $(buttonId).height()+parseInt($(myDiv).css("padding-bottom"); 
    $(myDiv).animate({height:totalHeight},150); 
} 

Es wird eine globale Variable der ursprünglichen div Höhe und fügt die aktuelle Drop-Down-Höhe, Button und div untere Polsterung, dass und stellt dann die div-Höhe mit einer Animation ein, die im Wesentlichen den Effekt wiedergibt, der von einem relativen Positions-Scroll-Menü gegeben wird. Dies funktioniert zunächst, kann aber einige Probleme verursachen.

Angenommen, es gab 10 Reihen von Schaltflächen. Wenn ein Knopf der obersten Reihe gedrückt wurde und nur ein kleines Dropdown hatte, würde das Div immer noch ein wenig größer werden. Um das zu beheben, könntest du mehr Mathe machen.