Средство просмотра PDF в IE 11 перекрывает верхнюю выпадающую полосу прокрутки

Question

У меня есть панель инструментов с выпадающим списком над значком <object></object> (screenshot). Когда pdf-файл отображается, а затем выпадающий список с полосой прокрутки выпадает, полоса прокрутки исчезает за pdf-файлом. Как это исправить?

Существует код:

<div id="modal-content-container"> 
    <div class="modal-header"></div> 
    <div class="modal-body"> 
     <div class="col-md-12 assign-mode" style="display: block;"> 
      <div class="col-md-2" style="position: relative;"> 
       <div style="position: relative;"> 
        <div style="margin-bottom: 2px;"><label style="margin-bottom: 0px;"><input name="destinationType" 
                           type="radio" checked="" 
                           value="RESIDENT"> 
         Resident</label> <label style="margin-bottom: 0px;"><input name="destinationType" type="radio" 
                        value="COMPANY_FOLDER"> 
         Company</label></div> 
        <input class="form-control run" id="destinationId" type="text" placeholder="Click to Assign"> 
        <ul class="items" style="display: block; z-index: 1;"> 
         <li class="item" data-resident-id="2">Kathlee Cambria Cole</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <li class="item" data-resident-id="1">Amy Davis</li> 
         <iframe class="ie-fix" src="about:blank"></iframe> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="preview-content"> 
      <div class="embed-container"> 
       <object data="unassignedDocuments/98/preview" type="application/pdf" style="height: 100%;"> 
        <div style="margin: 50px auto; width: 70%; text-align: center;">Your browser does not support file 
         with this extension. Please download document <a href="unassignedDocuments/98/download">here</a>. 
        </div> 
       </object> 
      </div> 
     </div> 
    </div> 
    <div class="modal-footer"></div> 
</div> 

Answer 1

Дело в том, вы положили внутри <ul> тег для борьбы с лежащей в основе <object> элемента, но размер уменьшается на ширину полосы прокрутки, когда <ul> достигает максимизаторами высота.

Так что вы хотите сделать, это держать из <ul> prefferably перед ним:

<div style="position: relative;"> 
    <iframe class="ie-fix" src="about:blank"></iframe> 
    <ul class="items" style="display: block; z-index: 1;"> 
     <li class="item" data-resident-id="2">Kathlee Cambria Cole</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
     <li class="item" data-resident-id="1">Amy Davis</li> 
    </ul> 
</div> 

И тогда вы будете нуждаться в некоторой CSS, чтобы выровнять их друг на друга:

.ie-fix { 
    position: absolute; 
    width: 100%; 
    height: 300px; 
    z-index: 1; 
} 
.items { 
    position: absolute; 
    width: 100%; 
    max-height: 300px; 
    z-index: 1; 
}