CODEWITHSUNDEEP
jqueryjquery-uitabsmodal-dialog
DroidOS
DroidOS

Reputation: 8890

jQuery UI Dialog Conflicts

I have run into an issue when getting the jQuery UI dialog to popup over a tab view which in turn contains three floated panels (divs). The code goes something like this

<body>
<div id='dialog'>My Dialog</div>
<div id='mytabs'>
<ul><li><a href='#tabA'>Tab A</a></li><li><a href='#tabB'>Tab B</a></li></ul>
<div id='tabA'>
<div id='toolpanel' style='float:left;width:40px'>Content</div>
<div id='proppanel' style='float:left;width:200px'>Content</div>
<div id='datapanel' style='float:left;clear:right;width:100px'>Content</div>
</div>
<div id='tabB'>...</div>
</div>
</body>

Originally, I was expanding the third panel to fill the whole of the available client area. Something along the line of

var wh = $('#tabA').width() - $('#toolpanel').outerWidth() - $('#proppanel').outerWidth();
$('#datapanel').css('width',wh + 'px');
$('#dialog').dialog({modal:true});

However, with this setup I found that the third panel, datapanel floated down below its siblings as soon as I opened the dialog. I have temporarily put in a little hack that is preventing this

$('#datapanel').css('width',wh - 28 + 'px');

Essentially, preventing the datapanel from taking up the full space left over after placing its siblings.

I don't get it. I thought the jQuery UI dialog does into an absolutely positioned layer with a default zIndex of 1000. If that is the case why should attempting to show it cause my datapanel to float down? And why should that bit of arithmetic, wh - 28, stop that from happening?

I'd much appreciate any help with this one.

Upvotes: 2

Views: 967

Answers (1)

ryuusenshi
ryuusenshi

Reputation: 1986

This happens because of your resizing, not because of jQuery UI, I'll try to explain exactly why the best I can.

You have to keep in mind that tabA, as an element without a prescribed width, will, by default, take up 100% of its container (and not the sum of widths of its children, which is what you seem to have assumed), and for this reason your arithmetic when trying to resize datapanel doesn't work. Actually, if you comment out the dialog invoking line, you'll see that tabB breaks and falls under the fold because of the resizing.

You can fix this either by defining a style for tabA's width or use this piece of code

var whA = $('#toolpanel').outerWidth(true) + $('#proppanel').outerWidth(true) + $('#datapanel').outerWidth(true);

$('#tabA').css('width',whA + 'px');

You also seem to have neglected the fact that all elements are made of margins+border+padding+content.

So, when you say

var wh = $('#tabA').width() - $('#toolpanel').outerWidth() - $('#proppanel').outerWidth();

first of all, by using just outerWidth() instead of outerWidth(true) you are ignoring the margins on the two inner divs.

Then in:

 $('#datapanel').css('width',wh + 'px');

you are setting the width [which just relates to content] of datapanel to wh, but according to what you have calculated in wh, what you should be setting is the entire width of the div [including the margin, border and padding].

So, by subtracting 

$('#datapanel').outerWidth(true)-$('#datapanel').width()  //margins+border+padding of datapanel

in wh you get the desired width.

In conclusion, here's a code snippet that should work for you:

var whA = $('#toolpanel').outerWidth(true) + $('#proppanel').outerWidth(true) + $('#datapanel').outerWidth(true);

$('#tabA').css('width',whA + 'px');

var wh = $('#tabA').width() - $('#toolpanel').outerWidth(true) - $('#proppanel').outerWidth(true)-$('#datapanel').outerWidth(true)+$('#datapanel').width();


$('#datapanel').css('width',wh + 'px');
$('#dialog').dialog({modal:true});

Upvotes: 2

Related Questions