Наложение Office UI Fabric JS не распространяется на другие компоненты - PullRequest
Новая
       26

Наложение Office UI Fabric JS не распространяется на другие компоненты

0 голосов
/ 26 апреля 2018

В Office UI Fabric JS компонент наложения не проходит поверх компонента раскрывающегося списка. Это можно ожидать или я что-то не так делаю? 

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>

1 Ответ

0 голосов
/ 26 апреля 2018

Я не уверен, будет ли это ошибкой, но исправить это достаточно просто. Всегда проверяйте, чтобы ваши наложения были определены после содержимого, которое вы хотите наложить (т.е. внизу страницы). 

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

В качестве альтернативы вы указываете встроенный z-index. По умолчанию z-index: 0. Установка его на z-index: 1 также обеспечит его позиционирование над другими элементами. 

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

Кроме того, в вашем примере используется версия 1.2, но последний выпуск - 1.5. Хотя это не решает эту проблему, оно решает множество других, с которыми вы, вероятно, еще не сталкивались. 

<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>
...