View Full Version : Bug with modal dialogs contained inside tabs (on IE)

22 Mar 2007, 12:56 PM

I have been using yui-ext for a short while and have run into a bug with the use of tabs and dialogs in Internet Explorer 6 (it works in FireFox). The modal dialog cannot be selected when activated in IE. The following code produces the bug:

<title>Hello World Dialog/Tab Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script language="javascript">
var HelloWorld = function(){
var dialog;

return {
init : function() {
Ext.get('show-dialog-btn').on('click', this.showDialog, this);

showDialog : function(){
dialog = new Ext.BasicDialog("hello-dlg", {width:500, height:300, modal:true });
dialog.addButton('Close', dialog.hide, dialog);

var tabs = {
init : function(){
var tabs = new Ext.TabPanel("tabs");
tabs.addTab("Test", "Test");
tabs.addTab("Test2", "Test");

Ext.EventManager.onDocumentReady(tabs.init, tabs, true);
Ext.onReady(HelloWorld.init, HelloWorld, true);

<input type="button" id="show-dialog-btn" value="Hello World" />

<div id="tabs">
<div id="Test" class="tab-content">

<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Hello Dialog</div>
<div class="x-dlg-bd">Hello World!</div>

<div id="Test2" class="tab-content">

The workaround is simple (just don't stick the dialog in the tab or don't use modal mode), but it is less than ideal if, for instance, one wants to use the setUrl functionality of tabItems and the dialog only makes sense on a particular tab.

Btw. yui-ext is a very impressive piece work for a single person to be doing - best of luck with it.


22 Mar 2007, 1:45 PM
This has been covered numerous times and isn't really considered a bug. The dialog should be rendered to the document.body, not the tab container. See this thread and the referenced FAQ entry http://www.jackslocum.com/forum/viewtopic.php?=&p=10123

While the dialog may only be relevant in the context of a specific container (e.g. a single tab), and only activated from there, for example by a button on tab 1, the dialog itself should be at the body level. SetUrl on the tabitem should be bringing in the content of the tab, not the dialog. If activating the tab needs to cause specific content to appear in the dialog body, that should trigger a request for the dialog.body element to update via Ajax.