Relative Positioned Bootstrap Dropdown within Button Group

Question

I have a series of Buttons, each in its own button group class with a dropdown menu:

I've scoured plenty of stack overflow and google links. I've tried changing the z-index to a higher value, tried changing the css position attribute, and have even resorted to resizing the container div with an onclick method, which didn't work too well.

When a button is clicked, I want the div within which the buttons live, to resize. To do this, the div and the dropdown have to be relative (seems to be the easiest way). As you can see the div resizes, but all the button groups are also relative, so they move around too.

I want the dropdown to open up right under the button to which it belongs, and overlap other buttons if necessary while not affecting their position. I copied a JS Fiddle from another user which showcases my problem: The second button is moved when the first button's dropdown is open (that user was interested in another feature).

I need to move on to another project today and don't have a lot of time I can dedicate to this right now, any tips are appreciated to get me on the right track. Code that is used in the JSFiddle:

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

Goal:

UPDATE looks like on page load the dropdowns (the 'ul' elements with scrollable-menu class) already have their height information stored

on document ready is when i loop through and create all these elements with this 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>');

I loop through and append 'li' elements to populate the dropdowns.

Answer 1

In order for the div element to update it's size, the scrollable menu and the div need to be set to position: relative;. The buttons in my case also have a relative position, thus their position was distorted along with the div.

To get a workaround I added an onclick functions to the buttons:

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

It gets a global variable of the original div height and adds the current dropdown height, buttonHeight, and div bottom padding to that and then sets the div height with an animate, which in essence recreates the effect given by a relative position scroll menu. This works for now but can cause some problems.

Suppose there were 10 rows of buttons. If a top row button was pressed and only had a small dropdown, the div would still get a little taller. To fix that you could do some more math.