JQuery UI tip: floated divs inside JQueryUI tabs

There’s a somewhat confusing problem that can happen if you want to use a multi column (floated div) chunk of content for a tab in JQuery UI tabs.

Basically, the floats inside the tab container cause the tab container to lose it’s height, making your content appear outside of the tab box.

Let us assume our code looks something like this:

The problem is that the floats inside the tab container cause the tab container height to be incorrect (Shown via Firefox)

The solution to this, was to apparently make the tab container float as well, by adding a float:left; width: 100%; to the ‘myTabs‘ div; making the content all appear correct.

End result css:

12 Comments
  1. Garrett says:

    This issue has bugged me for so long. Thanks so much for posting this bit of info!! You have contributed well.

    Have you used jQuery UI tabs as form steps? If so, do you have any useful tips for that? I'd like to make (tab 2) default selected or disabled w/o the need for doing so with the jQuery code. Maybe by means of a class name and an extended function to the UI tabs initialization.

    Reply
  2. You would call one of the methods for the JQuery tabs instance;

    To select another tab (0-based index):

    As shown above, I call select -after- the instance instantiation; it also has to be called after Dom is ready.

    To disable tab/tabs you'd do something like:

    $(“#tabs”).tabs(“option”, “disabled”, [0,2,3]);

    Where 0,2,3 are indexes of the tabs.

    Nitty-gritty details on the methods can be found on the bottom here:

    http://jqueryui.com/demos/tabs/#methods

    Reply
  3. You can also do it in the instantiation too:

    $( “#tabs” ).tabs({selected: 2, disabled: [0,1]});

    Reply
  4. Joel says:

    I'm glad I found this post. It was driving me crazy.

    I saw a question about this on Stackoverflow and no one had answered it. (The asker doesn't seem to interested in marking answers to any of his questions). You might post a link there back to this post for others with the same problem.

    Thanks again for posting this.

    Reply
  5. I've posted a link to your StackOverflow reference. Surprised this hasn't fallen on the radar for more popular places.

    Reply
  6. Jezza says:

    Thanks you, thank you, thank you! This was driving me insane!

    Reply
  7. Rob says:

    Very Helpful! Thanks.

    Reply
  8. Jayme says:

    I had to put float:left; width:100%; in both the #tab and .ui-tabs .ui-tabs-panel for it to float the items properly. Thanks for the tip!

    Reply
  9. Salik says:

    Thanks this was driving me up the wall..and the UX designer wasn’t very happy with me either!

    Reply
  10. Mara Alexander says:

    You, sir, are my hero. Thank you!

    Reply
  11. SangPetualang says:

    this solve my problem .. you’re awesome

    Reply
  12. Mario Diana says:

    Just wondering: what was your thought process in figuring out this fix? I started to realize that it must have to do with float, but I don’t think it would have occurred to me to make the tab itself float left. Was that just a moment of inspiration for you, and you got lucky, or did it make sense somehow?

    Reply
Leave a Reply




XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">