DialogInnerScroll

by ksevksev

HTML

<button id="open">open</button>
<div id="dialog">
    <div class="dialogContents">
        <div><div class="header">Heading in Dialog</div><div class="subheading header">subheading</div></div>
        <div class="innerScroll">
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
            Inner Scroll Text. Inner Scroll Text. Inner Scroll Text. 
        </div>
    </div>
</div>

CSS

.dialogContents
{
    height: 100%;
    padding: 10px;
}

.header
{
    font-size: 24pt;
    font-weight: bold;
    background-color: #dddddd;
}

.relative
{
    //position: relative;
	border: thick blue solid;
    top:0px;
}

.subheading
{
    font-size: .7em;
}
.innerScroll
{
    background-color: #bbbbbb;
	overflow-y: auto;
//    height: 250px;
}

JavaScript

var b = $("#open");
var d = $("#dialog");
var contents = $(".dialogContents");

d.dialog({
    autoOpen:false,
    modal: true,
    height: 400,
    width: 500,
    title: "Heading above scrollable div",
    resizable: false,
    open: function () {
        fixHeight(contents);
    }
});

b.click(function (event) {
    d.dialog("open");
});

function fixHeight(container)
{
    var header = container.find(".header");
    var headerHeight = 0;
    header.each(function (i, e) {
        headerHeight += $(e).outerHeight(true);
        console.log("index=["+i+"] headerHeight=["+headerHeight+"]");
    });
    var scrollContainer = container.find(".innerScroll");
    var newHeight = container.height() - headerHeight;
    scrollContainer.outerHeight(newHeight);
    console.log("scrollContainer newHeight=["+newHeight+"]");
}