Dropdown-menu not top most

Question

I'm having some difficulty with a data-toggle="dropdown" . It opens, but renders only inside the div in resides, as demonstrated by the image below:

Some of the HTML:

<div class="row pull-right">
    <div class="col-md-12">
        <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-xs btn-link dropdown-toggle" aria-expanded="false">
                <i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a href="" ng-click="vm.doSomeStuff(args)">Delete</a></li>
            </ul>
        </div>
    </div>
</div>  

Dropdown css:

Any way I can get around this?

Codepen example: example

Thanks!

Answer 1

It was caused by the slimScroll aka fullScroll directive, which adds the following inline styles (during run-time):

The following codepen , demonstrates the issue...

 <div full-scroll style="overflow: hidden; width: auto; height: 100%;">
    <div class="full-height-scroll">
        ...
    </div>
    <div class="slimScrollBar"></div>
    <div class="slimScrollRail"></div>
</div>

Directive:

/**
 * fullScroll - Directive for slimScroll with 100%
 */
function fullScroll($timeout){
    return {
        restrict: 'A',
        link: function(scope, element) {
            $timeout(function(){
                element.slimscroll({
                    height: '100%',
                    railOpacity: 0.9
                });

            });
        }
    };
}

Added inline styles:

[UPDATE]

The following fixes the issue:

<div class="btn-group" uib-dropdown dropdown-append-to-body>
    <button class="btn btn-xs btn-link" aria-expanded="false" uib-dropdown-toggle>
        <i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i>
    </button>
    <ul uib-dropdown-menu>
        <li><a href="" ng-click="vm.doSomeStuff(ms)">Delete</a></li>
    </ul>
</div>