jQuery Forum

I'm working with code to open multiple dialogs in a cascading fashion in a desktop type environment. The issue is keeping the dialogs from opening outside the container "#desktop" div. After about 10 or so dialogs have opened, they continue to cascade outside of the #desktop div that I want to be the container. I have tried the containment option, using positioning option with at: and within: with no luck. I can set the draggable option div to #desktop and it stays in the div correctly as soon as it moves. I have a fiddle setup for testing here. I have included a screen shot of what is happening as well. I have added a border to the #desktop div to show the dialogs opening outside of the div.

Here is my code so far:

1. var dialogOffset = { top: 10, left: 200 }; $('button').click(function () { var parent = $('#desktop'); var parentPos = parent.offset(); var parentIndex = $('#desktop').index(parent); var numDialogs = $('.dlg' + parentIndex).length; var dialogTop = parentPos.top + dialogOffset.top + numDialogs * 30; var dialogPosition = [parentPos.left + dialogOffset.left + numDialogs * 30, dialogTop]; $('<div class="dlg' + parentIndex + '"></div>').dialog({ position: dialogPosition, width: 250, close: function () { $(this).dialog('destroy').remove(); } }); });

Any Help Would Be Appreciated. Thanks

I have a Tab set that I am using a special jquery-reset.css file to over write all of the styles that I need to. I have it listed after the standard jquery-ui.css in my includes. I have added scope around all of the tab sets . I also am using other widgets within the tab sets, buttons, a datatable plugin, etc.
The problem I'm having, is that we want the widgets inside of the tabs to have the default ui theme that we have chosen. Because the widgets are inheriting the tabs wrappers, there default style is being overriden. Does any one know of how I can accomplish this without overridding the default theme. So, for instance, I want the tabs header background to not be there, so I use:

.dashboard-tabs .ui-widget-header {
    border: 0;
    background: none;
}

to overwrite it. But this overwrites the datatable header background as well.

Any ideas? Any help would be awesome.

Thanks,

T Bryan