Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Navbar align right fail on IE 11.0.9 browser

Jan Louw pro asked 6 years ago

Hi, All is working fine on FireFox and Chrome and Safari, but IE 11 the 'dropdown-menu-right' (last navbar-nav section in code) fails - the content overlay on the left of the navbar. 
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>
Greatly appreciate input in this. Regards Jan

Damian Gemza staff commented 6 years ago

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

Jan Louw pro commented 6 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 6 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

Jan Louw pro commented 6 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 6 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

Jan Louw pro commented 6 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 6 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.

Jan Louw pro commented 6 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 6 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
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Opened

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
About author
Jan Louw
Pro User 118Support score
24Questions 3Answers 0Snippets