Question

I recently started using the JQuery UI tabs and I want to put a table inside a tab. The tab should be as small as possible, so i want its height being related to the height of the table inside and so I use heightStyle: “content”.

The Problem is, when I activate the tab, it slides down like it’s height is set correct, but when the effect of sliding down is finished, the height of the tab is set to 1px.
Below you can see the code I’m using.

HTML code:

<div id="tab_layer" class="tab_layer_l">
    <ul>
        <li><a href="#content_tab_layer">tab1</a></li>
    </ul>
    <div id="content_tab_layer" class="ui-widget">
        <table border=1 cellspacing=0 cellpadding=5 align=left>
            <tr>
                <td width=50%>...</td>
                <td width=50%>...</td>
            </tr>
            <tr>
                <td width=29%><input type="text" value="" /></td>
                <td width=29%><input type="text" value="" /></td>
            </tr>
            <tr>
                <td width=29%><input type="text" value="" /></td>
                <td width=29%><input type="text" value="" /></td>
            </tr>
            <tr>
                <td width=29%><input type="text" value="" /></td>
                <td width=29%><input type="text" value="" /></td>
            </tr>
        </table>
    </div>

Code inside javascript file:

$('#tab_layer').tabs({
    active: false,
    collapsible: true,
    event: "mousedown touchstart",
    heightStyle: "content",
    hide: {effect: "slideUp", duration: 500},
    show: {effect: "slideDown", duration: 500},
});

I would be very happy if someone could help me, I’ve searched a lot on the Internet but it seems, noone else has this problem 🙁

Answer 1

I don;t get the slide effect for some reason but I noticed the bad table fit. As soon as I removed the table align property the layout appeared correctly.

I hope it helps.