Topic: Navbar Breaks in IE11 - navbar-brand and navbar-text only
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" >
<a class="navbar-brand" target="_blank" href="https://www.example.com">
<img src="../../assets/images/logo.svg" alt="Example.com" style="height: 30px;" />
<span class="navbar-text black-text ml-auto">
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?
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.
- 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