Skip to main content

Search and Top Navigation

#5814 closed bug (notabug)

Opened July 09, 2010 08:56AM UTC

Closed July 09, 2010 05:54PM UTC

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)

Attachments (0)
Change History (1)

Changed July 09, 2010 05:54PM UTC by scottgonzalez comment:1

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.