MS Edge and Navbar Issues

Topic: MS Edge and Navbar Issues

Alberto pro asked 6 years ago

Hi,
i am having problems with the navbar in Edge and IE. The right sub navbar is displayed below the logo instead of to the right of it. It works in Opera, chrome and firefox.
I have attached the code. live example at http://dev.wilmovet.com

<mdb-navbarSideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar"
[containerInside]="false">

<logo >
<a [routerLink]="['/home']"class="navbar-brand d-none d-md-block p-0" >
<divclass="d-flex flex-row">
<divclass="flex-column">
<imgclass="img-brand-logo"src="assets/brand/logo.png" [alt]="altLogo" />
</div>
<divclass="flex-column px-2 pt-2 align-items-end">
<divclass="brand-logo-sm p-0">
Willamette Valley
</div>
<divclass="brand-sublogo-sm p-0" >Mobile Veterinary Services</div>
<divclass="brand-motto-sm mt-auto" >Because for your pets there's no place like home...</div>
</div>
</div>
</a>

<a [routerLink]="['/home']"class="navbar-brand navbar-logo-small mx-auto d-sm-block d-md-none" >
<imgclass="img-brand-logo-sm"src="assets/brand/logo.png" [alt]="altLogo"/>
<divclass="navbar-brand align-middle brand-logo-sm">
{{wordLogo}}
</div>
</a>
</logo>

<linksclass="flex-md-column">

<ulclass="navbar-nav ml-auto ">
<liclass="nav-item hidden-md-down">
<aclass="nav-link"href="#"><iclass="fa fa-facebook"></i></a>
</li>
<liclass="nav-item hidden-md-down">
<aclass="nav-link"href="#"><iclass="fa fa-instagram"></i></a>
</li>
<liclass="nav-item hidden-md-down">
<aclass="nav-link"href="#"><iclass="fa fa-twitter"></i></a>
</li>
<liclass="nav-item hidden-md-down">
<aclass="nav-link"href="#"><iclass="fa fa-google-plus-circle"></i></a>
</li>
<liclass="nav-item hidden-md-down">
<aclass="nav-link"href="#"><iclass="fa fa-youtube-square"></i></a>
</li>
<liclass="nav-item hidden-md-down">
<aclass="nav-link" [routerLink]="['/admin']"><iclass="fa fa-gears"></i></a>
</li>
<liclass="nav-item hidden-md-down">
<aclass="nav-link" [routerLink]="['/client']"><iclass="fa fa-paw"></i></a>
</li>
<liclass="nav-item">
<aclass="nav-link text-nowrap"href="#"><strong>Call Us Today @ (541) 704-7387</strong></a>
</li>
</ul>

<ulclass="navbar-nav ml-auto ">
<liclass="nav-item active" >
<aclass="nav-link waves-light" [routerLink]="['/home']"
[routerLinkActive]="['active']" mdbRippleRadius>
Home <span class="sr-only">(current)</span>
</a>
</li>
<liclass="nav-item">
<aclass="nav-link waves-light"
[routerLink]="['/value']" routerLinkActive="active" mdbRippleRadius>
Value
</a>
</li>
<liclass="nav-item">
<aclass="nav-link waves-light"mdbRippleRadius>
Services
</a>
</li>
<liclass="nav-item">
<aclass="nav-link waves-light"mdbRippleRadius>
About Us
</a>
</li>
<liclass="nav-item dropdown btn-group"dropdown>
<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Basic dropdown<span class="caret"></span></a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<aclass="dropdown-item waves-light"href="#"mdbRippleRadius>Action</a>
<aclass="dropdown-item waves-light"href="#"mdbRippleRadius>Another action</a>
<aclass="dropdown-item waves-light"href="#"mdbRippleRadius>Something else here</a>
<divclass="divider dropdown-divider"></div>
<aclass="dropdown-item waves-light"href="#"mdbRippleRadius>Separated link</a>
</div>
</li>
<liclass="nav-item">
<aclass="nav-link waves-light"mdbRippleRadius *ngIf="!isOnline()" (click)="login()">Login</a>
</li>
<liclass="nav-item">
<aclass="nav-link waves-light"mdbRippleRadius *ngIf="isOnline()" (click)="logout()">Logout</a>
</li>
</ul>
</links>
</mdb-navbar>

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Dear Alberto,

In accordance to posts on Microsoft's support forum - Internet Explorer below 11 won't support the solution that we have created, because it depends on browser's security issues.

I have a way to temporarily solve your problem. You can try to add to elements

<button class="navbar-toggler"> and <ul class="navbar-nav">

a class:

.Your-Class-Name{
position: absolute;
right: 0;
top: 0;
margin: 20px;
}

You can always upgrade my way with @media queries, for better looking in IE & Edge browsers.

Best regards,

Damian

Alberto pro commented 6 years ago

Hi, thanks for the suggestion however i tried and: 1) it correctly shows the navbar in the position I need. 2) In the angular html there is no navbar-toggler. it gets inserted by the code and therefore i can't assign the class (well without a lot of code behind at least) and it displays in the wrong place 3) Now the collapsed navbar shows at the right edge and not as a full width element when the toggler is clicked

Damian Gemza staff commented 6 years ago

Hi, Alberto, could you send me code of your's application ? Here's my address: d.gemza@mdbootstrap.com Your's code will help me a lot to solve issue. Best Regards, Damian

Add comment

Alberto pro answered 6 years ago

0 0 Best answer

Maciej Actually I believe the bug is in your code. The navbar aligns perfectly if the [containerInside]="false" is omitted. However I need the navbar to span the entire top of the page regardless of size with menu items at right, logo at left and collapsible behaviour. Could you please provide a fix? Thanks Alberto

Add comment

Maciej Szuchta free answered 6 years ago

0 0 Best answer

Hello Alberto

You can read more about browser support for angular here: https://angular.io/guide/browser-support

For your issue please try :
<div>/** IE9, IE10 and IE11 requires all of the following polyfills. **/</div>
<div>import 'core-js/es6/symbol';</div>
<div>import 'core-js/es6/object';</div>
<div>import 'core-js/es6/function';</div>
<div>import 'core-js/es6/parse-int';</div>
<div>import 'core-js/es6/parse-float';</div>
<div>import 'core-js/es6/number';</div>
<div>import 'core-js/es6/math';</div>
<div>import 'core-js/es6/string';</div>
<div>import 'core-js/es6/date';</div>
<div>import 'core-js/es6/array';</div>
<div>import 'core-js/es6/regexp';</div>
<div>import 'core-js/es6/map';</div>
<div>import 'core-js/es6/set';</div>
<div></div>
<div>/** IE10 and IE11 requires the following for NgClass support on SVG elements */</div>
<div>import 'classlist.js';  // Run `npm install --save classlist.js`.</div>
<div></div>
<div>/** IE10 and IE11 requires the following to support `@angular/animation`. */</div>
<div>import 'web-animations-js';  // Run `npm install --save web-animations-js`.</div>
<div></div>
Let me know if this solves your problem.

REgards

Please insert min. 20 characters.

Hello Alberto You can read more about browser support for angular here: https://angular.io/guide/browser-support For your issue please try :

/** IE9, IE10 and IE11 requires all of the following polyfills. **/

import 'core-js/es6/symbol';

import 'core-js/es6/object';

import 'core-js/es6/function';

import 'core-js/es6/parse-int';

import 'core-js/es6/parse-float';

import 'core-js/es6/number';

import 'core-js/es6/math';

import 'core-js/es6/string';

import 'core-js/es6/date';

import 'core-js/es6/array';

import 'core-js/es6/regexp';

import 'core-js/es6/map';

import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */

import 'classlist.js'; // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */

import 'web-animations-js'; // Run `npm install --save web-animations-js`.

Let me know if this solves your problem. REgards

Alberto pro commented 6 years ago

Hi, polyfilsl are already imported. Problem persists. THis is what my polyfills.ts looks like: /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ import 'core-js/shim'; // added mahendra import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/promise'; // added mahendra import 'es6-shim/es6-shim.js'; // added mahendra import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/set'; import 'core-js/es6/typed'; // mahendra import 'core-js/es6/weak-map'; // mahendra /** IE10 and IE11 requires the following for NgClass support on SVG elements */ import 'classlist.js'; // Run `npm install --save classlist.js`. /** Evergreen browsers require these. **/ import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; import 'core-js/es7/observable'; /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ import 'web-animations-js'; // Run `npm install --save web-animations-js`. /*************************************************************************************************** * Zone JS is required by Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ /** * Date, currency, decimal and percent pipes. * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 */ import 'intl'; // Run `npm install --save intl`. /** * Need to import at least one locale-data with intl. */ import 'intl/locale-data/jsonp/en'; //import '../node_modules/blob'; // import ''; //import '../node_modules/form-data';

Hi,
polyfilsl are already imported. Problem persists.
THis is what my polyfills.ts looks like:

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/shim'; // added mahendra
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/promise'; // added mahendra
 import 'es6-shim/es6-shim.js'; // added mahendra
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/set';
 import 'core-js/es6/typed'; // mahendra
 import 'core-js/es6/weak-map'; // mahendra

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'core-js/es7/observable';

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
 import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
 import 'intl/locale-data/jsonp/en';

//import '../node_modules/blob';
 // import '';
 //import '../node_modules/form-data';

Please insert min. 15 characters.

Maciej Szuchta free commented 6 years ago

Please send me your HTML file with navbar to m.szuchta@mdbootstrap.com. I can't reproduce your issue with provided HTML. Regards.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Alberto

Pro User 22Support score
17Questions 11Answers 0Snippets