Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#10495 closed defect (wontfix)

TabContainer render too wide when use relative width

Reported by: lingerer Owned by:
Priority: high Milestone: 1.4
Component: Dijit Version: 1.4.0
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

I'm tring upgrade my code from 1.3.2 to 1.4 and found my TabContainer became very wide. Here's my code:

<table width="98%" align="center">
	<tr>
		<td>
		<div id="too long"
			dojoType="dijit.layout.TabContainer" doLayout="false"
			style="width: 100%; font-size: 9pt; text-align: left"
			class="bottomtab">
		<div dojoType="dijit.layout.ContentPane" title="test" >
			<b>test</b>
		</div>

		</div>
		</td>
	</tr>
</table>

The render result like this:

<div class="nowrapTabStrip dijitTabContainerTop-tabs dijitTabNoLayout" role="tablist" style="width: 50200px;" dojoAttachEvent="onkeypress:onkeypress" dojoAttachPoint="containerNode" wairole="tablist">

Attachments (1)

error.png (3.4 KB) - added by lingerer 10 years ago.

Download all attachments as: .zip

Change History (7)

Changed 10 years ago by lingerer

Attachment: error.png added

comment:1 Changed 10 years ago by bill

Resolution: invalid
Status: newclosed

This is a common complaint. The problem is that you set width: 100% on your TabContainer. 100% of what width? The table's width? But the table determines it's width by how big it's contents are. If you want the table to be 98% the width of the viewport then try style="width: 98%".

comment:2 Changed 10 years ago by lingerer

Resolution: invalid
Status: closedreopened

I don't think it is a invalid one. 1.This code works fine in 1.3 2.It still display extreme wide if I delete the width:100% in the TabContainer? widget class. 3.setting style="width:98%" in table won't work for this

comment:3 Changed 10 years ago by bill

Resolution: wontfix
Status: reopenedclosed

If you want the 1.3 behavior you can specify controllerWidget=""dijit.layout.TabController?". That will turn off the scrolling tabs, which is what causes the width issue.

Otherwise, when sticking a TabContainer inside of a table, you need to specify a width in pixels or ems, not in percent.

comment:4 Changed 10 years ago by bill

Description: modified (diff)
Summary: TabContainer render too width when use relative widthTabContainer render too wide when use relative width

comment:5 Changed 10 years ago by Adam Peller

Milestone: 1.4.11.4

comment:6 Changed 9 years ago by Rob Retchless

This is a duplicate of #10113, and it's definitely a bug. Cross-posting here for clarity, and to let @lingerer know you're not crazy. :)

Note: See TracTickets for help on using tickets.