In IE11, if you go to the Admin Template Pack for Bootstrap 4, Live Preview, then Dashboard V1, (https://mdbootstrap.com/live/_MDB/templates/Admin/home.html) the page will look washed out and only links on the left sidebar menu will work. I have tried this on two different Windows instances. Chrome and Firefox work fine. What can I do to get all 3 browsers to work the same?
hi,
send me please zipped files of your project. I’ll take a look at it.
my email: m.stasiak@mdbootstrap.com
Regards
Hello,
I have the same problem on the 11 and the above proposals do not solve the problems.
Thank you for your help.
I am on the MDB pro version 4.3.2 and angular pro 4.1.0.
Figured it out.
Just remove,
<div class="sidenav-bg mask-strong"></div> from the fixed sidenav and fixed navbar template.
All problems solved.
Hi Miroslaw,
It is still not working. The sidebar still jumps around when scrolling in IE11
Hey Chester,
The solution to your problem is adding this code to the mdb.css file:
@media (min-width: 1440px) {
.double-nav {
padding-left: 0px !important;
left:240px;
}
}
And comment the following code line in '.side-nav' class
z-index: 999;
Regards,
Hi Miroslaw,
Thanks for your fix. I added them and it worked.
However, in IE10/11 I noticed that the sidenav and navbar kept jumping around when I scroll through a long page. It is fine in all other browsers.
The solution to that problem is adding this code to the mdb.css file:
In the '.side-nav .sidenav-bg' class add 'width: 240px'
Right below it, add:
@media (max-width: 1440px) {
.side-nav .sidenav-bg {
Width: 0;
Min-width: 0px;
}
}
Then you need to change the link to CSS style in HTML file from mdb.min.css to mdb.css (18 lines in HTML code).
Regards,
Any quick fix for IE11? The sidenav-bg is visible.
I am using template from: https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/side-nav-fixed-navbar-fixed.html
Rather than sending you any files, I am just trying to make the demos on the mdbootstrap.com website work in IE11. If you can make those work and let me know what you changed to do it, I can take it from there.
Here are the pages that don't work on IE11:
Symptoms: Washed out look, nothing on the page is clickable.
Admin: https://mdbootstrap.com/live/_MDB/templates/Admin/home.html
Magazine: https://mdbootstrap.com/live/_MDB/templates/Magazine/magazine%20team%20page%20default.html
Blog: https://mdbootstrap.com/live/_MDB/templates/Blog/Blog-Homepage-1.html
Ecommerce: https://mdbootstrap.com/live/_MDB/templates/Ecommerce/product.html
The following demos are not washed out and are clickable, but the main text is not centered and shifted to the right a bit.
Portfolio: https://mdbootstrap.com/live/_MDB/templates/Portfolio/web-developer.html
Landing Page (Band): https://mdbootstrap.com/live/_MDB/templates/Landing-Page/band-landing-page.html
Thanks so much!
Lapis,
send me please zipped files of your project. I'll take a look at it.
my email: m.stasiak@mdbootstrap.com
Regards
I'm running into the same issue with a double-nav. The site works fine in Chrome, but when it's opened on IE11, the sidenav-bg persists on the page, even if it's clicked on.
When I change the width of .side-nav and .sidenav-bg, the main page works again, but if I shrink down, the sidebar is not accessible because it sits under the sidenav-bg.
However, when I copy this page: https://mdbootstrap.com/forums/topic/admin-template-for-bootstrap-4-bug-in-ie11/#post-16773
into internet explorer 11, it seems to work fine.
Thanks for your reply. I tried to implement your solution several different ways. Both of them involved the mdb.css file where the sidenav-bg class is located.
.side-nav .sidenav-bg {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 240px;
/* Method 1: I tried commenting out the following line and adding the line after */
/*width: 100%;*/
width: 240px;
z-index: -1;
background-attachment: fixed; }
.side-nav .sidenav-bg:after {
/* Method 2: I tried commenting out the following line and adding the line after */
*width: 100%;*/
width: 240px;
display: block;
content: "";
position: absolute;
height: 100%;
top: 0;
left: 0;
bottom: 0;
margin-bottom: -99999px;
padding-bottom: 99999px; }
/* Method 3: I tried adding the following 3 lines */
.sidenav-bg {
width: 240px;
}
I get partial solutions from each. Method 1 by itself gives the same results for me as Methods 2 and 3 (and even combinations of those changes).
The good:
The changes above now give me access to the top navbar (including the Notifications and Profile Menus), the lower right circle edit icon animation, the Things to Improve wrench tooltips, and the page not being washed out in general.
The bad:
The top navbar is still washed out and the upper left hamburger menu is not clickable so the sidenav doesn't show unless I increase the width of my browser.
I want to add that Chrome, Firefox, and Edge all work fine. These only happen in IE11. But they do happen on the following demos on your website:
Symptoms: Washed out look, nothing on the page is clickable.
Magazine: https://mdbootstrap.com/live/_MDB/templates/Magazine/magazine%20team%20page%20default.html
Blog: https://mdbootstrap.com/live/_MDB/templates/Blog/Blog-Homepage-1.html
Ecommerce: https://mdbootstrap.com/live/_MDB/templates/Ecommerce/product.html
The following demos are not washed out and are clickable, but the main text is not centered and shifted to the right a bit.
Portfolio: https://mdbootstrap.com/live/_MDB/templates/Portfolio/web-developer.html
Landing Page (Band): https://mdbootstrap.com/live/_MDB/templates/Landing-Page/band-landing-page.html
Your main site on Wordpress also seems to work fine.
I used the following page to verify MDBootstrap browser compatibility:
https://mdbootstrap.com/browsers-and-devices/
(FYI, the link to the Wall of Browser Bugs (https://mdbootstrap.com/browser-bugs/) gives a 404 error. I think the page you want is here: http://getbootstrap.com/browser-bugs/)
I wanted to give you all of the information I have so you can offer a complete fix. Thanks again for your help.
Hello,
This problem will be fixed in MDB 4.4
If you want to fix this problem in your project you need to add rule
'width' to class 'sidenav-bg', depends on the width you want. In our case it is 240px
Regards
