I am facing a challenge in positioning an overlay over a div. Previously, I had the code working perfectly when the div was confined to just one row. However, I am now struggling to determine the correct height of the div when it spans multiple lines. It seems that the div reports its height as a single row but displays as multi-line after rendering.
function InitializeControls() {
console.log("Width: " + $('#PlanViewControls').width());
console.log("Height: " + $('#PlanViewControls').height());
console.log("innerHeight: " + $('#PlanViewControls').innerHeight());
console.log("outerHeight: " + $('#PlanViewControls').outerHeight());
$('#PlanViewControls').show();
$('#PlanViewControlsOverlay')
.stop()
.show()
.css({ opacity: .7 })
.width($('#PlanViewControls').width())
.height($('#PlanViewControls').height())
.offset($('#PlanViewControls').offset())
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
width: 100%;
min-width: 200px;
overflow: hidden;
padding: 5px;
}
#PlanViewControls > div
{
display: inline-block;
min-height: 20px;
}
<div id="PlanViewControlsOverlay">
</div>
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all">
<div class="separated" style="padding-top: 3px">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 4px">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 3px">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
Can anyone suggest how to retrieve these measurements accurately?