Issue
I am using bootstrap dropdown in navBar on menu(three dots) icon
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
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>
Solution
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).
Answered By - Maihan Nijat
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.