MDB Pro JQuerry 4.7.1 shows black screen for my site

Topic: MDB Pro JQuerry 4.7.1 shows black screen for my site

Doc free asked 5 years ago

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 ?

Bartłomiej Malanowski staff commented 5 years ago

How can we recreate your issue?

Doc free commented 5 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.

Add comment

kennovation free answered 5 years ago

0 0 Best answer

<p>I had a similar problem and worked around it as follows...</p>

<p>First, apply the patch to mdb.js described here: <a href="https://mdbootstrap.com/support/other/freshly-installed-mdb-pro-black-screen/">https://mdbootstrap.com/support/other/freshly-installed-mdb-pro-black-screen/</a></p>

<p>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 </p>

<p>So, my html now looks like this:</p>

<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>
...
</code></pre>

<p>This does seem to be a bug, so it would be great if this were fixed in MDB proper.</p>

<p>Hope this helps.</p>

Please insert min. 20 characters.

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.

Doc free commented 5 years ago

It does, thanks !

As for me, I used the same fix that was descrived in the topic you linked to. It works, too.

cms8000 pro commented 3 years ago

This helps A LOT, thank you!!!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

Doc

117Support score
9Questions 7Answers 0Snippets