PDA

View Full Version : [OPEN] Bug in Dialog Render



Bobafart
26 Jan 2007, 6:20 AM
I noticed that when I display a dialog in FF the bottom "close" button gets cut off. It is fine in MIE.


cut off bottom in FF 1.5.0.9

http://www.gabbr.com/sandbox/yahooui/images/bugscreenshots/ffdialogbug.gif

looks fine in MIE 7.0.5

http://www.gabbr.com/sandbox/yahooui/images/bugscreenshots/miedialogbug.gif

when you resize the window in FF it goes away. a force-refresh brings it back.

hopefully it isn't something I am doing incorrectly from my end.

here is a live example: http://www.gabbr.com/sandbox/yahooui/yahoodialog8.php

Animal
26 Jan 2007, 6:58 AM
You're specifying autoCreate:true, but passing an existing div name - that will result in duplicated ids, and we know that's wrong!

Remove the <div id="dialog"... element.

Then use dial.header to get the header Element to update and dial.body to get the body element to update.

Your probs could be to do with that.

Bobafart
3 Feb 2007, 6:04 PM
I even specified autocreate: false to no avail

does anyone else know why this problem occurs?

i still havent been able to solve it.. any help would be appreciated

tryanDLS
3 Feb 2007, 8:15 PM
Dialog should be rendered to the body, not nested inside another div. Try moving the div outside the wrapper div.

Bobafart
4 Feb 2007, 11:08 AM
Dialog should be rendered to the body, not nested inside another div. Try moving the div outside the wrapper div.

man, I can't believe how many hours I have spent on this thing.. I took all your suggestions, made modifications and it just doesnt work. Same problem also occurs in FF v2.0

playing around with the width/height/minwidth/height doesn't change it either.

I dumped the <div id="dialog"> -- to no avail.

I followed the "Hello World" dialog in the documentation as well and still get the error.


I even made a "vanilla" version -- I stripped all the div's (except for the dialog divs) -- and still have the same display issue/bug:

vanilla version:

http://gabbr.com/sandbox/yahooui/yahoodialog10.php

tryanDLS
4 Feb 2007, 12:52 PM
Try adding the footer div to your dialog layout e.g


<div class="ydlg-ft"></div>


I think there's a bug in Dialog when the footer isn't there, and the addButton logic tries to add it.

Bobafart
4 Feb 2007, 1:51 PM
I added the footer-- no change:

http://gabbr.com/sandbox/yahooui/yahoodialog10.php

jack.slocum
4 Feb 2007, 2:11 PM
This is fixed in my local trunk. The problem is the buttons are "float:right" and therefore don't take up space (some times).

I fixed it by adding this line right before the call to syncBodyHeight() (near the end) in BasicDialog.addButton().

this.footer.setHeight(this.btnContainer.offsetHeight + this.footer.getPadding('tb'));

This also fixed it in IE6 strict mode.

Bobafart
4 Feb 2007, 2:34 PM
This is fixed in my local trunk. The problem is the buttons are "float:right" and therefore don't take up space (some times).

I fixed it by adding this line right before the call to syncBodyHeight() (near the end) in BasicDialog.addButton().

this.footer.setHeight(this.btnContainer.offsetHeight + this.footer.getPadding('tb'));

This also fixed it in IE6 strict mode.

doh! I spent so long on this trying to figure out the problem... having no idea that buttons are float:right! damn...

what div does 'tb' refer to? the body dialog div? the footer?

also syncBodyHeight() is nowhere in createDialog -- and I don't see it in the docs either.. can you elaborate please?

do you have a working example that I can see live?

jack.slocum
4 Feb 2007, 2:45 PM
syncBodyHeight is a private method in BasicDialog.js

Take a look at Element.getPadding(). Like other functions in Element, it accepts a standard set of "sides" as a string. getPadding("tb") means parse and sum the padding-top ('t') and padding-bottom ('b').

Bobafart
4 Feb 2007, 7:58 PM
I found an even simpler solution: set the foot style height to 30px

.. and it works!



<div class="ydlg-ft" style="height: 30px;"></div>


so much easy to debug when you know what the problem is! :) (ie. float:right; )

it ain't perty but it works until you release the proper fix for it (hopefully in v1.0!)

Jul
10 Feb 2007, 9:55 PM
I also had this same problem. Adding the fix mentioned above to the BasicDialog code worked great for dialogs created from existing markup. However, dialogs automatically generated with the "autocreate: true" config option still exhibit the same footer spacing problem.

Hard coding the footer spacing using "this.footer.setHeight(30);" in yui-ext.js (in place of the suggested fix) does the trick, but that's obviously a sloppy solution. Any suggestions on how to fix it in a more elegant way? Maybe this is already fixed in the unreleased code?

Thanks,
Julian

Jul
14 Feb 2007, 7:40 PM
I discovered what my particular problem was with autocreated dialogs. Setting the title using the setTitle() method AFTER using addButton() causes this size miscalculation to occur. I suspect the syncBodyHeight() call in addButton() must get confused when there is no title set.

So... I'm not sure this qualifies as a bug. Perhaps it just shows a need to explain the particular order in which these methods should be called.