I’ve made further refinements to the jQuery Dialog implementation discussed here. I’ve refactored my JavaScript to use vars for the buttons so I don’t have to maintain separate button instantiations for different browsers:
buttons = {"Cancel": function() {$(this).dialog("close");}, "Go":function() {add(id);}}
if($.browser.msie){
$("#addDialog").dialog({
autoOpen: false, bgiframe: true, buttons: buttons, modal: true
}).dialog("open");
}
$("#addDialog").dialog({
autoOpen: false,bgiframe: true,buttons: buttons,>modal: true,overlay: {backgroundColor: '#000000', opacity: 0.5}}).dialog("open");
}
I've also reduced the amount of mark-up being generated in the JavaScript by setting .ui-helper-hidden on the element in the HTML, e.g.:
div id="addDialog" title="Make new thing" class="ui-helper-clearfix" form id="addForm" class="ui-helper-hidden"
fieldset
div class="yui-g"
div class="yui-u first"
label for="thingy"Thingy/label
label for="whatsit"Whatsit/label
/div
div class="yui-u"
input type="text" name="thingy" id="thingy"
input type="text" name="whatsit" id="whatsit"
/div
/div
/fieldset
/form
/div
Then I use jQuery to remove this class when the Dialog is opened:
$("#addForm").removeClass("ui-helper-hidden");
So, making progress getting tidied up and playing nice, and so far it is cooperating across the browsers I am supporting (FF and IE7). I did, however, run into a problem where the Dialog’s height and scrolling behaviour changed with each open and close. Two issues: 1) the height of the content area was shrinking or expanding with each open/close; 2) a scroll bar was present even when no visible content was available further down the content area. These issues were isolated to FF3, as IE7 was rendering the Dialog with the same height and no unnecessary scroll bar every time.
I resolved these issues by removing any minHeight or height options in the Dialog constructor and by removing the overflow property from .ui-dialog-content. If no minHeight/height are set in the Dialog constructor both FF3 and IE7 render the Dialog’s content wrapped nicely. If the overflow property is removed (set to ‘auto’) then scrolling never appears – yippee!
But wait, hold your horses, it doesn’t stop there. While my form dialog renders nicely without a minHeight/height option in the constructor, my confirmation dialog requires a minHeight of zero in order to wrap the Dialog’s content appropriately. I tried reproducing the same CSS values included in the form dialog (which sets a width and margin (on the form), wraps fields in a fieldset and includes a yui-g to space the fields), but to no avail. Could the icon classes be doing something funny? If I get to the bottom of this particular nugget I’ll be sure to share my findings with you, gentle reader, or please feel free to comment. For now, back to the drawing board.