Opened 9 years ago

Closed 9 years ago

#5814 closed bug (notabug)

Panels jumping when not directly under </ul>

Reported by: Jelly Owned by:
Priority: major Milestone: 1.9.0
Component: ui.tabs Version: 1.8.2
Keywords: panel jumping ajax Cc:
Blocked by: Blocking:

Description

If I have a code like this:

<div id="content">
	<div id="tabs">
		<ul>
			<li><a href="#ui-tabs-1">Start</a></li>
		</ul>
	</div>
	<div id="leftcontent">
		<div id="ui-tabs-1">Test</div>
		<div id="bottom_tool"></div>
	</div>
</div>

And then I add a ajax tab with the add function both the already defined: "<div id="ui-tabs-1">Test</div>"
and the new "<div id="ui-tabs-2">Test</div>" jumps in the DOM so they lay under the "</ul>" like this:

<div id="content">
	<div id="tabs">
		<ul>
			<li><a href="#ui-tabs-1">Start</a></li>
			<li><a href="#ui-tabs-2">Ajax tab</a></li>
		</ul>
		<div id="ui-tabs-1">Test</div>
		<div id="ui-tabs-2">THIS IS THE NEW TAB</div>
	</div>
	<div id="leftcontent">
		<div id="bottom_tool"></div>
	</div>
</div>

If I change my code to:

<div id="content">
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Start</a></li>
		</ul>
	</div>
	<div id="leftcontent">
		<div id="tabs-1">Test</div>
		<div id="bottom_tool"></div>
	</div>
</div>

And then add the ajax tab again, it works like expected:

<div id="content">
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Start</a></li>
			<li><a href="#ui-tabs-2">Ajax</a></li>
		</ul>
	</div>
	<div id="leftcontent">
		<div id="tabs-1">Test</div>
		<div id="ui-tabs-2">Test</div>
		<div id="bottom_tool"></div>
	</div>
</div>

(I removed all unnecessary class, id. too make the code a bit more readable)

Change History (1)

comment:1 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed

We don't support users applying ids of ui-tabs-NUM to their own elements. The ui-tabs- namespace for ids is reserved for content generated by the tabs plugin.

Note: See TracTickets for help on using tickets.