Topic: Fixed Navigation drop down menu right out of screen
Hi,
After upgrade to current version of mdb-pro (ng-mdb-pro@6.0.2), my dropdown navbar options floats off the screen on the right side.
I've followed the upgrade instruction, but can't seem to figure out why this is happening. I've resolved all the dependency for this version of mdb-pro (npm WARN ng-mdb-pro@6.0.2 requires a peer of @angular/common@5.0.0 - 6.0.0-rc.5).
My code
<mdb-navbar SideClass="navbar fixed-top navbar-expand-md navbar-dark indigo scrolling-navbar ie-nav" [containerInside]="false">
<logo>
<a class="logo navbar-brand waves-light" (click)="onLogoClick()" mdbRippleRadius><strong class="white-text">{{appMeta.name}}</strong></a>
</logo>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item waves-light" mdbRippleRadius *ngFor="let nav of navopts">
<a *ngIf="nav.mnuvis && usrRole >= nav.mnurole"class="nav-link" (click)="onNavLnk(nav.mnulnk)">{{ nav.mnuopt}}</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown btn-group" dropdown>
<a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<a class="dropdown-item" (click)="onAccClick('Pro')">Profile</a>
<a class="dropdown-item" (click)="onAccClick('Pwd')">Reset Password</a>
<span class="d-flex justify-content-end p-0"><small>{{appMeta.version}}</small></span>
</div>
</li>
</ul>
</links>
</mdb-navbar>
I've somebody can be so kind and assist with this.
Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Damian Gemza staff commented 6 years ago
Dear Louw, Could you provide me some screenshots of actual behavior? I tried to reproduce your problem using your code, but for me, everything works like a charm. Tested on Ubuntu 17.10 Firefox Quantum 58. Best Regards, DamianJan Louw pro commented 6 years ago
Hi Damian, how can I attach a screenshot to the issue? RegardsDamian Gemza staff commented 6 years ago
Post new answer and there you can past some images, or upload it to some image hosting services like imageshack, and paste me a link.Jan Louw pro commented 6 years ago
Uploaded https://imageshack.com/a/img922/9175/rCKXn3.pngDamian Gemza staff commented 6 years ago
Dear Louw, Please add this styles to your global stylesheet. This fix will be added in next release of MDB Angular. .navbar-nav { .dropdown-menu-right.dropdown-menu { left: unset; } } Best Regards, DamianJan Louw pro commented 6 years ago
Hi Damian, this resolve my issue. Greatly appreciated. Regards