Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#2666 closed bug (notabug)

Tabs not anchoring correctly

Reported by: alflow Owned by: klaus
Priority: major Milestone:
Component: ui.core Version: 1.2.3
Keywords: tabs absolute position Cc:
Blocked by: Blocking:

Description

I have a relatively complex page layout, with multiple tabsets, each within a nested div.

The tabs seem to be absolutely positioned in IE7 and IE6 - they stay in place when I scroll the containing div (see screenshots).

A snippet of the HTML code in contained below.

<div id="pod_A" class="podInfo100">
  	<div id="pod_A_Header" class="podInfoHeader">
	  	<table class='header'>
			<tr>
				<td width="20"><img id="pod_A_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
				<td width="150"><h1 class='compact'>Client Profile</h1></td>
				<td><span id="pod_A_Header_SubInfo"></span></td>
			</tr>
		</table>
	</div>
	<div id="pod_A_Content_Container">
		<div id="pod_A1" class="podInfo50">
			<div id="pod_A1_Header" class="podInfoHeader">
				<table class='header'>
					<tr>
						<td width="20"><img id="pod_A1_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
						<td width="50"><h1 class='compact'>Information</h1></td>
						<td><span id="pod_A1_Header_SubInfo"></span></td>
						<td align="right"><span id="pod_A1_subcommands"><input type="button" id="btn_client_edit" name="btn_client_edit" value="Edit" /></span></td>
					</tr>
				</table>
			</div>
			<div id="pod_A1_Content_Container" class="podInfo100">
				<div id="pod_A1_Content" class="podInfoContent">
					<p align="center"><img src="assets/images/ui/i_loading.gif" width="16" height="16" alt="loading" /></p>
				</div>
			</div>
		</div>
		<div id="pod_A2" class="podInfo50">
			<div id="pod_A2_Header" class="podInfoHeader">
				<table class='header'>
					<tr>
						<td width="20"><img id="pod_A2_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
						<td width="50"><h1 class='compact'>Contacts</h1></td>
						<td><span id="pod_A2_Header_SubInfo"></span></td>
						<td align="right"><span id="pod_A2_subcommands">
							<input type="button" id="btn_A2_fn" name="btn_A2_fn" value="Add" />
						</span></td>
					</tr>
				</table>
			</div>
			<!-- Content -->
			<div id="pod_A2_Content_Container" class="podInfo100" style="margin:0;padding:0">
				<!-- Tabs -->
				<div id="pod_A2_Tabs">
					<ul>
						<li><a href="#pod_A2_Tab1"><span>List</span></a></li>
					</ul>
				</div>
				<!-- List -->
				<div id="pod_A2_Tab1" class="pad_none">
					<div id="pod_A2_Content" class="podInfoContent"></div>
				</div>
				<!-- Form -->
				<!-- DIV created on the fly -->
			</div>
		</div>
		
		<!-- Notes pod -->
		<div id="pod_A3" class="podInfo100">
			<div id="pod_A3_Header" class="podInfoHeader">
				<table class='header'>
					<tr>
						<td width="20"><img id="pod_A3_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
						<td width="50"><h1 class='compact'>Notes</h1></td>
						<td><span id="pod_A3_Header_SubInfo"></span></td>
						<td align="right"><span id="pod_A3_subcommands">
							<input type="button" id="btn_A3_fn" name="btn_A3_fn" value="Add" />
						</span></td>
					</tr>
				</table>
			</div>
			<!-- Content -->
			<div id="pod_A3_Content_Container" class="podInfo100" style="margin:0;padding:0">
				<!-- Tabs -->
				<div id="pod_A3_Tabs">
					<ul>
						<li><a href="#pod_A3_Tab1"><span>List</span></a></li>
					</ul>
				</div>
				<!-- List -->
				<div id="pod_A3_Tab1" class="pad_none">
					<div id="pod_A3_Content" class="podInfoContent">
						<p align="center"><img src="assets/images/ui/i_loading.gif" width="16" height="16" alt="loading" /></p>
					</div>
				</div>
				<!-- Form -->
				<!-- DIV created on the fly -->
			</div>
		</div>
		<!-- Addresses pod -->
		<div id="pod_A4" class="podInfo100">
			<div id="pod_A4_Header" class="podInfoHeader">
				<table class='header'>
					<tr>
						<td width="20"><img id="pod_A4_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
						<td width="50"><h1 class='compact'>Addresses</h1></td>
						<td><span id="pod_A4_Header_SubInfo"></span></td>
						<td align="right"><span id="pod_A4_subcommands">
							<input type="button" id="btn_A4_fn" name="btn_A4_fn" value="Add" />
						</span></td>
					</tr>
				</table>
			</div>
			<!-- Content -->
			<div id="pod_A4_Content_Container" class="podInfo100" style="margin:0;padding:0">
				<!-- Tabs -->
				<div id="pod_A4_Tabs">
					<ul>
						<li><a href="#pod_A4_Tab1"><span>List</span></a></li>
					</ul>
				</div>
				<!-- List -->
				<div id="pod_A4_Tab1" class="pad_none">
					<div id="pod_A4_Content" class="podInfoContent">
						<p align="center"><img src="assets/images/ui/i_loading.gif" width="16" height="16" alt="loading" /></p>
					</div>
				</div>
				<!-- Form -->
				<!-- DIV created on the fly -->
				</div>
			</div>
		</div>
	</div>
</div>

Attachments (2)

Tabs_BeforeScroll.gif (87.0 KB) - added by alflow 12 years ago.
Before scrolling
Tabs_AfterScroll.gif (86.6 KB) - added by alflow 12 years ago.
After scrolling

Download all attachments as: .zip

Change History (7)

Changed 12 years ago by alflow

Attachment: Tabs_BeforeScroll.gif added

Before scrolling

Changed 12 years ago by alflow

Attachment: Tabs_AfterScroll.gif added

After scrolling

comment:1 Changed 12 years ago by paul

Owner: changed from paul to klaus

comment:2 Changed 12 years ago by aaronchi

This is not an issue with the script but an issue with the css.

If relatively positioned elements are placed inside of a scrolling container, IE treats them as position:fixed. To fix this, just add position:relative to the container element.

comment:3 Changed 12 years ago by neojp

This is a hasLayout bug on the Site css, not the script.

He may use position: relative; to the parent container which has overflow to enable layout on that div, or keep trying any other trick to enable it (like zoom, border, background, etc).

comment:4 Changed 12 years ago by paul

Resolution: invalid
Status: newclosed

comment:5 Changed 12 years ago by (none)

Milestone: 1.2.4

Milestone 1.2.4 deleted

Note: See TracTickets for help on using tickets.