CODEWITHSUNDEEP
htmlcssangularbootstrap-4
Zohab Ali
Zohab Ali

Reputation: 9554

dropdown-menu occupies new space instead of relative position

I am using bootstrap dropdown in navBar on menu(three dots) icon enter image description here

but problem is in mobile device when I open navBar and click on menu button then menu dropdown shows up but it takes space instead of showing on top of content. As shown in picture

enter image description here

here is the html code

<div class="dropdown" style="display: inline-block">
    <img src="{{environment.assets_base_url}}assets/images/menu.png" id="menuid" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="menuid">
        <a *ngIf="environment.enable_settigs" class="dropdown-item" href="{{settings_link}}">Settings</a>
        <!--<a class="dropdown-item" href="{{upgrade_link}}">Payment</a>-->
        <a class="dropdown-item" (click)="myLogout()">Logout</a>
    </div>
</div>

Upvotes: 3

Views: 2278

Answers (1)

Maihan Nijat
Maihan Nijat

Reputation: 9344

Add position: absolute; and set it's top and left relative to parent div for dropdown-menu. Also, add z-index to display it on the top of other elements (it sets the stack order).

By setting position: absolute; your dropdown-menu container position is set relative to its closest positioned ancestor. Make sure you it's parent div which is dropdown position is relative (not set to static).

Upvotes: 2

Related Questions