Navbar Breaks in IE11 - navbar-brand and navbar-text only

web
mobile

Topic: Navbar Breaks in IE11 - navbar-brand and navbar-text only

Aundra Miller asked 2 years ago

I have created a navbar that displays as expected in Chrome, FireFox, and Edge (logo on left, text and hamburger on right), but it's broken in IE11.

In IE11, the text displays on the left side with the logo immediately on its right. Everything is crammed on the left hand side. When reduced to a mobile size, the text switches to display the hamburger, but then the logo is pushed far to the right and overflows the browser.

Here is my code:

<mdb-navbar SideClass="navbar navbar-expand-sm navbar-light white" [containerInside]="false" >
<mdb-navbar-brand>
<a class="navbar-brand" target="_blank" href="https://www.example.com">
<img src="../../assets/images/logo.svg" alt="Example.com" style="height: 30px;" />
</a>
</mdb-navbar-brand>
<links>
<span class="navbar-text black-text ml-auto">
Status Text
</span>
</links>
</mdb-navbar>

When I remove the [containerInside]="false" attribute, then it behaves. But I need to remove the container. When I do, there are console errors:

"ERROR TypeError: Object doesn't support property or method 'remove'"

Thinking this was a problem with polyfills, I installed the element-remove NPM package, which seemed to resolve the first error, but now a second appears:

"ERROR TypeError: Unable to get property 'removeChild' of undefined or null reference"

Also, with the polyfill installed, the <links> HTML is completely absent from the DOM.

 

What can I do / what can be done to resolve this issue?


Damian Gemza staff answered 2 years ago

Dear @Aundra Miller 

Officially, we're not supporting IE browser.

IE11 is so old browser, which doesn't support common standards like flexbox, and because of this, there is such problem.

We'll take a look at this, but I cannot say if we will resolve this problem, because IE is not supported in MDB.

About problems TypeError: Did you installed every polyfill from src/polyfills.ts, and then npm install one more time?

Those polyfills are necessary while supporting IE.

Best Regards,

Damian


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 6.2.3
  • Device: Desktop
  • Browser: IE11
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No