BasicDialog incompatible with ylayout-inactive-content?

[SteveEisner]

Noticed that when I have class="ylayout-inactive-content" on the div that will become a dialog, and that dialog is modal, then dragging it causes it to disappear. The shadow stays behind.



<div id="edit-dlg" >
<div class="ydlg-hd">Title</div>
<div class="ydlg-bd">
...
</div>
<div class="ydlg-ft">
</div>
</div>


showDialog: function() {
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("edit-dlg", {
modal:true,
width:600,
height:150,
shadow:true,
minWidth:500,
minHeight:150
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Save', dialog.hide, dialog);
dialog.addButton('Cancel', dialog.hide, dialog);
}
dialog.show(getEl('addContactButton').dom);
}


Is there a better way to start the dialog initially hidden?

[jack.slocum]

Did you try visibility:hidden? A combo of visibility:hidden;position:absolute; will also work to make sure it doesn't take space as well.

[arctu]

im experiencing this too.. FF2

my code..

function loginbox(){
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
modal:true,
autoTabs:true,
width:500,
height:300,
minWidth:300,
minHeight:300
});

dialog.addButton('Close', dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
}

YAHOO.ext.EventManager.onDocumentReady(loginbox, '', false);



<div>
<div>Hello Dialog</div>
<div>
<div>

<div>
Hello...



</div>
</div>
<div>
<div>
... World!
</div>

</div>
</div>
</div>
<div>
</div>
</div>

the parent has the class ylayout-inactive-content. though, i've tried without that class and the shadow bug still appears..

might it be because i didnt create the dialog in an object?[/code]

[jack.slocum]

What exactly is the problem? The shadow stays behind?

[arctu]

yes.. there'll be a box in (blue?) that stays behind when the window is closed. But if shadow is turned off, there will be no box left behind..

[jack.slocum]

Try this patch:

YAHOO.ext.BasicDialog.prototype.hide = function(callback){
if (this.fireEvent('beforehide', this) === false)
return;

this.beforeHide();
if(this.shadow){
this.shadow.hide();
}
if(this.animateTarget){
this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
var b = getEl(this.animateTarget, true).getBox();
this.proxy.show();
this.el.hide();
this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35, this.hideEl.createDelegate(this, [callback]));
}else{
this.proxy.hide();
this.el.hide();
this.fireEvent('hide', this);
}
}