CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
Gurduloo
Gurduloo

Reputation: 151

Fixed header and footer in a resizable jquery-ui dialog?

I have a resizable jquery-ui dialog and I'd like for only one div in it to be scrollable. I think this would be fairly easy to do in a fixed size dialog, but this one really needs to be resizable. Here's a sample of my dialog

http://jsfiddle.net/gurduloo/eLejtx7q/

<div id="dialog">
<div id="dialogHeader">
    <span>Header Content</span><br/>
    <input type='radio' value='1' name='options' checked='checked' />Option 1
    <input type='radio' value='2' name='options' />Option 2
</div>
<div id="dialogContent">
    <table>
        <thead>
            <tr><th>Column 1</th><th>Column 2</th></tr>
        </thead>
        <tbody>
            <tr><td>Data Item</td><td>Data Item</td></tr>                
            <tr><td>Data Item</td><td>Data Item</td></tr>
        </tbody>
    </table>
</div>
<div id="dialogFooter">
    <span>Footer Content</span>
</div>    
</div>

And the dialog code:

$(document).ready(function(){    
  $("#dialog").dialog({
    width: 400,
    height: 300,
    autoOpen: true,
    resizable: true,
    title: 'My Dialog'
  });
});

I think it's kind of self explanatory - I want the stuff in the "dialogHeader" div to remain visible at the top and the stuff in "dialogFooter" to remain visible at the bottom of the dialog when the user scrolls up or down.

Upvotes: 3

Views: 2515

Answers (1)

Gurduloo
Gurduloo

Reputation: 151

Ok, I worked it out with some javascript and a little css

$(document).ready(function(){    
  $("#dialog").dialog({
    width: 400,
    height: 300,
    autoOpen: true,
    resizable: true,
    title: 'My Dialog',
    resize: function(event,ui){
        ResizeDialog();
    }
  });

  ResizeDialog();
});

function ResizeDialog(){
  var headerHeight = $('#dialogHeader').height();
  var footerHeight = $('#dialogFooter').height();
  var theadHeight = $('#dialogContent thead').height();
  var dialogHeight = $('#dialog').height();
  $('#dialogContent').height(dialogHeight - (headerHeight + footerHeight) - 25);
}

CSS:

#dialogContent{    
  overflow: scroll;
}

Upvotes: 3

Related Questions