Topic: MDB Pro JQuerry 4.7.1 shows black screen for my site
I have a very simple site. The only pages I edited are index.html, style.css and added a specific .js file for the script of my site. I didn't use any additional plug in nor any additional template It worked perfectly with MDB Pro 4.7.0. Today, I dowloaded 4.7.1 and unzipped it. I replaced the index.html and style.css file from 4.7.1 with the ones from my site, and added my specific .js file in the js folder. I tried to open the index.html, and I just have a black screen. Nothing else. What's going wrong ?
I had a similar problem and worked around it as follows...
First, apply the patch to mdb.js described here: https://mdbootstrap.com/support/other/freshly-installed-mdb-pro-black-screen/
That only partially solved my problem. It seems that the timing is off and the spinner only activates during the fadeout of the black. It also seems that it might be layered behind the black (it's very quick, so I'm just guessing). To fix this (perhaps a kludge but it works for me), I put the contents of my preloader.html inside the
<div id="mdb-preloader" class="flex-center">
<div id="preloader-markup">
<!-- Put spinner here (same code as would be in mdb-addons/preloader.html -->
</div>
</div>
So, my html now looks like this:
<body>
<div id="mdb-preloader" class="flex-center">
<div id="preloader-markup">
<!--
This isn't really supposed to be here. mymdb.js should fill this in via load or mdb-addons/preloader.html
However, that's not working. Seems to be conceptually wrong since the spinner needs to start sooner.
Therefore, by putting the spinner as active in the base html, it starts right away and then the patched code in mymdb.js
handles the fading out.
-->
<div class="preloader-wrapper big active crazy">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
...
This does seem to be a bug, so it would be great if this were fixed in MDB proper.
Hope this helps.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.6.1
- Device: PC
- Browser: Firefox up to date
- OS: Windows 10 x64
- Provided sample code: No
- Provided link: No
Bartłomiej Malanowski staff pro premium commented 6 years ago
How can we recreate your issue?
Doc commented 6 years ago
Perhaps by doing what I did : take an index.html, style.css and a custom .js file, all made with version 7.4.0, and put them in a fresh 7.4.1 install, erasing the index.html and style.css which comes with the 7.4.1 installation. After some tests, it appears it's the preloader again that pauses problem. If I edit out the "preloader" lines from my index.html (I kept the standard ones which came with 7.4.0), there is no problem. If I leave them untouched, I get a black screen with never ending loading gif.