I have a toolbar with a dropdown above the <object></object>
tag
(screenshot). When pdf-file are showed and then dropdown with scrollbar drops out, scrollbar disappears behind the pdf-file. How can fix it?
There is a 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>
The thing is, you put <iframe>
inside the <ul>
tag to combat the underlying <object>
element, but <iframe>
size is reduced by the width of scrollbar when <ul>
reaches its max-height.
So what you want to do is keep <iframe>
out of <ul>
prefferably before it:
<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>
And then you're going to need some css to align them on top of each other:
.ie-fix {
position: absolute;
width: 100%;
height: 300px;
z-index: 1;
}
.items {
position: absolute;
width: 100%;
max-height: 300px;
z-index: 1;
}