0

I have a webpage with a loading menu that greys out the background while the loading menu is shown. The menu is last in the document as to be on-top of the rest of the page. However, when using Google's Material Icons, the icon appears above the loading menu.

My guess would be that the icons load last, and as such are infront of static parts of the webpage.

I would expect and prefer the icon to be behind the loading menu. How could I achieve this?

In addition, I use bootstrap. I do not believe that my issue resides with bootstrap, however it may be crucial to understanding the code snippits.

Snippit of buttons: (I included more than neccesary incase my issue resides outside the icons)

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Link:</span>
  </div>
  <input type="text" class="form-control" id="studentLink" value="<?=studentLink?>" readonly>
  <div class="input-group-append">
    <button class="btn btn-light h-100" onclick="copyLinkToClipboard()">
      <span class="material-icons"style="font-size: 1em">
        content_copy
      </span>
    </button>
  </div>
</div>

Snippit of Loading Menu:

<!-- Loading Alert -->
<div class="d-flex justify-content-center align-items-center" style="position: absolute; top:0px; width: 100%; height: 100%; visibility: visible" id="loadingAlert">
  <div class="bg-light opacity-75" style="position: absolute; top:0px; width: 100%; height: 100%"> </div>
  <div class="shadow col-6 card bg-info text-white">
    <div class="card-header">
      <div class="d-flex">
        <div class="me-2 spinner-border align-self-center"></div>
        <div class="vr"></div>
        <h3 class="mx-2 align-self-end">Loading:</h3>
      </div>
    </div>
    <div class="card-body text-center">
      <h1>Creating Session</h1>
      <h3>Please wait</h3>
    </div>
  </div>
</div>
Joshua Miller
  • 1
  • Think you need to use z-index: https://css-tricks.com/almanac/properties/z/z-index/ – Kip May 11 '22 at 12:40

1 Answers1

0

Thank you @Kip for the answer.

Add the css style 'z-index' to the loading element.

Example (Based upon my code snippit):

<div class="d-flex justify-content-center align-items-center" style="position: absolute; top:0px; width: 100%; height: 100%; visibility: visible; z-index: 1000" id="loadingAlert">
...
</div>

Note the section style="z-index: 1000".

This feels like a very clunky solution, as why would you need to update the z-index, but here the solution is.

Joshua Miller
  • 1