Question

I am trying to position an overlay over a div. I had the code working successfully when the div was guaranteed to be only one row, but I am struggling to obtain the proper height of the div when it breaks out. It appears that the div reports its single-row height, but displays a multi-line height 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>

Is it possible to obtain these metrics?

Answer 1

I’ve put your code into this fiddle, changed a part whith errors (what JSLint reported) with working code and put it into .ready() so it would get called.

Look from here, whether it helps. I didn’t answered anything directly, but more precise question would help to nail down your problem (: