PDF-Viewer in IE 11 überlappt oberen Dropdown-Rollbalken

Question

Ich habe eine Symbolleiste mit einem Dropdown über dem <object></object> Tag (screenshot). Wenn die PDF-Datei angezeigt wird und die Drop-Down-Liste mit der Scrollleiste leer ist, verschwindet die Scrollleiste hinter der PDF-Datei. Wie kann es reparieren?

Es gibt einen Code:

<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

Die Sache ist, Sie setzen innerhalb des <ul> Tag, das die zugrunde liegenden <object> Element zu bekämpfen, aber Größe wird durch die Breite der Scrollbar reduziert, wenn <ul> seine Max- erreicht Höhe.

Also, was Sie tun möchten, ist aus <ul> halten prefferably, bevor es:

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

Und dann sind Sie einige CSS gehen zu müssen, sie auf aufeinander auszurichten:

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