CODEWITHSUNDEEP
javascriptoffice-jsoffice-ui-fabric
Leo
Leo

Reputation: 5122

Office UI Fabric JS overlay not going over the other components

In Office UI Fabric JS, the overlay component does not go over the dropdown component. Is this to be expected or am I doing something wrong?

var OverlayComponent = document.querySelector(".ms-Overlay");
var Overlay = new fabric['Overlay'](OverlayComponent);
var OverlayExampleButton = document.querySelector(".ms-Button");

OverlayExampleButton.onclick = function() {
  Overlay.show();
};

var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
for (var i = 0; i < DropdownHTMLElements.length; ++i) {
  var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>

<div class="ms-Overlay ms-Overlay--dark"></div>

<div id="content-main">
  <div class="padding">

    <div class="ms-Grid-row">
      <div class="ms-Dropdown" tabindex="0">
        <label class="ms-Label">Type: </label>
        <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
        <select class="ms-Dropdown-select">
          <option>Choose a type&amp;hellip;</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
          <option>D</option>
          <option>E</option>
          <option>F</option>
        </select>
      </div>
    </div>

    <button class="ms-Button ms-Button--primary" id="highlight-button">
            <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
            <span class="ms-Button-label" id="button-text">Hello</span>
            <span class="ms-Button-description" id="button-desc"></span>
        </button>
  </div>
</div>

Upvotes: 1

Views: 907

Answers (1)

Marc LaFleur
Marc LaFleur

Reputation: 33094

I'm not sure if this would be considered a bug, but the fix is simple enough. Always make sure your overlays are defined after the content you want it to overlay (i.e. the bottom of the page). 

<div id="content-main">
 <!-- snipped for brevity -->
</div>
<div class="ms-Overlay ms-Overlay--dark"></div>

Alternatively, you specify an inline z-index. The default is z-index: 0. Setting it to z-index: 1 will also ensure it's positioned over the other elements. 

<div class="ms-Overlay ms-Overlay--dark" style="z-index: 1;"></div>

Also, your example is using version 1.2 but the latest release is 1.5. While it doesn't resolve this issue, it does resolve a slew of others you likely haven't run into yet. 

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.5.0/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.5.0/css/fabric.components.min.css" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.5.0/js/fabric.min.js"></script>

Upvotes: 2

Related Questions