jQuery Forum

The demo you mentioned produces

Turns out the funky style height value is related to heightStyle=auto and has nothing to do with content outside of container. I removed my hack in the css and problem returns. Same results in Chrome, FF, IE.

Tabs Widget defines heightSyle :"fill" as 

Jake, 

Did you remove the old theme, and replace it with a new theme from  UI 1.10.3 and make sure you are not getting the old theme from the cache?

Yes, set "base" theme, cleared cache etc. Still no good. CSS and JS references below. The css are both 1.10.3. Still no good. Of course it's just gotta be a css issue... Another screenshot attached.

Yet the demo works on the UI site. It must be your custom CSS or custom javascript that is mucking with the layout.

JΛ̊KE

A natural conclusion to draw, BUT .... the problem was manifest when I upgraded to latest jquery + UI. Indeed the new jquery + UI may have brought along a construct that then incited a conflict. I took the demo and replaced all js and css references with those I use in my development. I also added the additional js and css I use in my development. Indeed the tab widget works, so it is not "custom CSS or custom javascript" but instead something to do with the constructs that surround the widget in my app (which, as I said, worked just fine before the upgrade). It would be my conclusion that the newest tabs widget object is somehow failing to anticipate some environmental background.

I now suspect there is a question of using the tab widget by way of AJAX. I have a set of vertical tabs (left margin) of my own making (not using UI widget). Each of these vertical tabs has a corresponding div to hold the respective tab content, all such divs hidden until user clicks clicks on a vertical tab. When this is done, active vertical tab div content is hidden and requested tab div content shown. If the div has never been loaded, an AJAX call is made to retrieve the div content. One such AJAX-retrieved content returns a UI tabs construct. This worked just fine in previous UI version but now does not. Of course the tabs widget init is executing since all the UI classes are inserted and so on.

As you have not showed me a misbehaving page or an idea as what code you have, I suggest you go through the jQuery UI Changelogs to see if something looks suspect.

JΛ̊KE

I did provide some screenshots of "misbehaving" pages, but of course not very interactive. There are thousands of lines of code, so it would be difficult to unravel to be able to share any sort of abbreviated example. Since, as we both know, and as I verified using the js and css I'm using, the demo example works. I'm just going to have to undergo the laborious process of locating where in all this muck something is amiss. I will again review the change logs. Nothing jumped out when I did so yesterday. Thanks for helping me stay on mission.

Your screen shot shows the result of the problem, I would inspect the DOM elements while looking at the live page to find the actual problem. 

I've been using Chrome inspector since the beginning. Interesting puzzle... I copied DOM via inspector from working example, and from failing example, and compared the two.... Identical.

Problem solved by surrounding the entire widget content with "absolute position" DIV (shown in caps below)

Thanks for posting this!.. I had the exact same problem and adding the absolute div solved it as well.

Maybe I just got lucky but the fix for me just add a div with style="clear:both" at the bottom of the tab wrapper.

<div id="tabs">

   <ul>
      <li><a href="#configurationTab">Configuration</a></li>
    </ul>
    <div id="configurationTab">
    ......
    </div>


     <div style="clear:both"></div>

</div>

I solved this problem by wrapping the contents in a div and setting the display to inline-block: