Navbar align right fail on IE 11.0.9 browser

Start your code here
<mdb-navbar SideClass="navbar fixed-top navbar-expand-md navbar-dark indigo scrolling-navbar ie-nav" [containerInside]="false">
<logo>
<a *ngIf="logoClick; else noclick" class="logo navbar-brand waves-light" (click)="onLogoClick()" mdbRippleRadius><strong class="white-text">{{appMeta.name}}</strong></a>
<ng-template #noclick>
<strong class="logo navbar-brand waves-light white-text">{{appMeta.name}}</strong>
</ng-template>
</logo>
<links>
<ul class="navbar-nav mr-auto">
<span *ngFor="let nav of navopts">
<li *ngIf="nav.mnuvis && usrRole >= nav.mnurole && !nav.submnu; else submnu" class="nav-item waves-light" mdbRippleRadius>
<a class="nav-link" (click)="onNavLnk(nav.mnulnk)">{{ nav.mnuopt}}</a>
</li>
<ng-template #submnu>
<li class="nav-item dropdown btn-group" dropdown>
<a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius><span class="clearfix d-none d-sm-inline-block">{{ nav.mnuopt}}</span></a>
<div class="dropdown-menu" role="menu">
<span *ngFor="let subnav of nav.submnu">
<a *ngIf="subnav.mnuvis" class="dropdown-item" (click)="onNavLnk(subnav.mnulnk)">{{subnav.mnuopt}}</a>
</span>
</div>
</li>
</ng-template>
</span>
</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>

Damian Gemza staff commented 7 years ago

Dear Louw, Could you please show me some screenshots with actual behavior in FF / Chrome and in IE? Best Regards, Damian

---

Louw pro commented 7 years ago

Hi Damian, I've upload image https://imageshack.com/a/img923/7426/D2Uj7I.png. Not sure how clear, but you would be able to see that IE image has no nav option on the right of the image, compared to FF and Chrome. Regards Jan

---

Damian Gemza staff commented 7 years ago

Dear Louw, Could you please send me your project at d.gemza@mdbootstrap.com or provide me reproduction repository? I'm unable to reproduce your case. Best Regards, Damian

---

Louw pro commented 7 years ago

Dear Damian, See https://imageshack.com/a/img923/2617/WvXCbw.jpg image of the AdminPro Template that I bought, showing the same behaviour on IE. Regards Jan

---

Damian Gemza staff commented 7 years ago

Dear Louw, Probably you're missing ie-double-nav class in ul which contains links from top navigation. Please try to add this class, or copy code from our documentation and try one more time: https://mdbootstrap.com/angular/layout/navigation/#f-s-f-n Also: Which type of Double Nav Layout you're using? And you're using MDB Angular Admin Template Pro or MDB Angular Pro? Best Regards, Damian

---

Louw pro commented 7 years ago

Dear Damian. Why include code if you don't reference it? I'm not using double-nav code but https://mdbootstrap.com/angular/layout/navigation/#r-f-n sample. I use MDB Angular Pro, but also show in my last comment that your MDB Angular Admin Template Pro which I bought is also showing the same behaviour on nav - which looks like the double-nav code you referencing in your last response. Regards

---

Damian Gemza staff commented 7 years ago

I thought that you're using Double Nav. Does this problem exists with code from this link https://mdbootstrap.com/angular/layout/navigation/#r-f-n ? I've copied it and for me I'm unable to see any problems.

---

Louw pro commented 7 years ago

Dear Damian, I believe this could be related to a previous issue that you assisted me with : <pre>Start your code here</pre> 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, Damian   I've removed the global style entry and the nav item appear on the right side of IE now, but with the symptoms of the previous assisted issue - the overflow of the drop-down menu. This is only happening on IE - it is working correctly on FF and Chrome, so somewhere this was fixed between 6.0.2 and 6.1.2 version of MDB Pro with the exception of IE. Hope this help to resolve this. Regards Jan

---

Damian Gemza staff commented 7 years ago

Dear Louw, Please send me your project or at least reproduction repository at d.gemza@mdbootstrap.com Without it, I'm unable to help you. Best Regards, Damian

---