0

I found a delicate bug in my jQuery application.

<div id="tabs">
    <ul>
    <li><a href="#tabs-1">Area 1</a></li>
    </ul>
    <div id="tabs-1">
        <button id="measure_north" class="languageClass" style="width:100%">Measure North Fw/Dam</button>
        <table class="accordion_table" id="table_measure_north" align="left" style="width:100%">
        </table>
        /* mythical bug here */
        <p>test</p>
    </div>
    </div>

Basically I have jquery tabs that contain buttons. Those buttons open up (they have tables underneath) on clicks (toggle). All buttons have the same functionality.

Every button that opens up scales the tabcontainer accordingly except the last button. Opening the last button will result in a table that goes beyond the borders of the tabcontainer.

And now comes the catch: If I add a line beneath the last button (Like <p>test</p> as done in aboves code) opening the last button will result in a correct scaling of the tabcontainer again.

Here is a jsfiddle that shows the wanted result: correct jsfiddle

and a jsfiddle that shows the problem: wrong jsfiddle (Remove the test paragraph to see the bug)

I guess the jQuery tabcontainer readjust their size depending if an element moves. If the last button is the last object they won't move if they are clicked and therefore no adjustment will be made.

Is this the right reason? If so is this a bug or intentional? Is there a fix (not just workaround)?

For now i can fix it with an empty line but thats quick and dirty.

4

0 回答 0