Controls will not get the appropriate sizes on the jQuery tab

Question

I am using jQuery ui tabs. If I open a tab that was closed when the page loaded, the sub-controls on this tab will not have the full width of the tab. This is because closed tabs get the ui-tabs-hide class, and it is set to none.

Is there an easy way to handle this? I already tried to use visibility hidden, and not display none, but this will wrap the contents of my tab below each other.

Answer 1

Try displaying the contents of your tabs (or initializing the controls in them) when they are displayed for the first time. You can use the show event for this.

Answer 2

I don't have enough reputation to post a comment, but here are 2 ideas.

1) Set the width of each of your divs to the same width.

2) Have you tried dynamically loading each tab with ajaxOptions?

I managed to launch my page using option 1.

Answer 3

I cannot reproduce the mentioned behavior on jsfiddle.net/zTBMG/1/ . On the initial hidden tab there is a class installed on ui-tabs-hide , as in the question.

Both, the progress indicator and the widget buttons inside the hidden tab display just fine.

In terms of solution, make sure the elements have their width using CSS only . If the width is set using width:100% , the browser will correctly re-melt. If you use fixed values ​​that result from running JavaScript, you need to manually respond to the recount.

If the problem persists, disable tab initialization and temporarily remove the ui-tabs-hide class and make sure your layout is correct. Use a tool like Firebug, and check that the layout / metrics of the element really get their values ​​from where you expect. Make sure that no additional margins or shims are installed.

Note. The sample code in the question really increases the likelihood of getting useful answers.

Answer 4

I regularly use jqueryui tabs. To make sure that the tabs are displayed with the same width and that all the child controls are displayed with the correct width, I simply add the “ui-widget-content” class to the divs that make up the tab, or the div containing the child control. Example below:

 <div class="tabs ui-widget-content ui-corner-all"> <ul> <li><a href="#divTools">Tools</a></li> <li><a href="#divNotices">Notices</a></li> </ul> <div id="divTools"> <div id="divStatus" class="ui-widget-content ui-corner-all"> </div> <div id="divUpdateStatusDialog" class="dialog"> </div> </div> <div id="divNotices"> <div class="ui-widget-content ui-corner-all"> </div> </div> </div> 

In addition, if you access the dynamic controls that appear when they are initialized, you need to hide the tabs off the screen to the left, and not use display: none . See http://jqueryui.com/demos/tabs/ for more details.

Hope this helps,

Pete

Answer 5

I had a problem with the same width with hidden divs. Try setting the size in css before hiding it. Then hide it right away in the same css file. Thus, the element is already set before hiding it or showing it later. It worked.