2016-04-22 9 views
0

<object></object>タグ (screenshot)の上にドロップダウンリストを持つツールバーがあります。 pdfファイルが表示された後、スクロールバーがドロップダウン表示されると、pdfファイルの後ろにスクロールバーが表示されなくなります。どのようにそれを修正できますか?IE 11の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> 

答えて

0

事がある、あなたは、基礎となる<object>要素を戦うために<ul>タグ内を置くが、<ul>がMAX-に到達したときサイズは、スクロールバーの幅によって減少されます高さ。

だから、あなたが何をしたいのかprefferablyその前に<ul>のうちをキープです:

<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; 
} 
+0

はい!それは良い作品です!ありがとうございました! –

関連する問題