Opened 12 years ago

Closed 12 years ago

#4367 closed defect (fixed)

TabContainer not sizing properly in the client area of LayoutContainer

Reported by: guest Owned by: bill
Priority: high Milestone: 1.0
Component: Dijit Version: 0.9
Keywords: Cc:
Blocked By: Blocking:


I'm seeing two different issues related to TabContainer? sizing when placed in the client area of a LayoutContainer?. It is displaying incorrectly in both Firefox 1.5 and 2.0, but it is ok in IE6 (all windows.)

The first item is when shrinking the browser window, the ContentPanes? containing the individual tabs shrink, but the TabContainer? doesn't, which adds scroll bars that shouldn't be there. When increasing the browser window size this doesn't happen.

The second item is when added padding or a margin to the LayoutContainer?, those values are not correctly included in determining the size of the TabContainer?. The left and top values are correctly set, but the width and height are too large, and it goes off the right and bottom of the screen.

Attachments (2)

example1.html (1.1 KB) - added by guest 12 years ago.
Illustrates the first item.
example2.html (1.1 KB) - added by guest 12 years ago.
Illustrates both items. Same as example1 except #main has padding of 40px

Download all attachments as: .zip

Change History (7)

Changed 12 years ago by guest

Attachment: example1.html added

Illustrates the first item.

Changed 12 years ago by guest

Attachment: example2.html added

Illustrates both items. Same as example1 except #main has padding of 40px

comment:1 Changed 12 years ago by bill

Owner: set to bill
Status: newassigned

Ah, at least #1 is because of the overflow:hidden getting set on layout containers (necessary for resizing something smaller on firefox) getting overridden by overflow:client for dijitAlignClient (since the TabContainer? is a client of the LayoutContainer?). Will fix...

comment:2 Changed 12 years ago by bill

(In [10441]) Remove unnecessary dijitAlignClient { overflow: auto; }. It conflicts with the overflow:hidden for layout widgets when a layout widget is nested as a client of a LayoutContainer?.

Fixes #2928 and refs #4367 (fixes example #1 in #4367).

comment:3 Changed 12 years ago by bill

Milestone: 1.0
Resolution: fixed
Status: assignedclosed

As for example2, actually this isn't a bug. You've done:

#main { height: 100%; width: 100%; padding: 40px; border: 0; }

which is invalid (or to be precise, not portable) because it sets the LayoutContainer?'s content size equal to the viewport size (IE, the browser window size), but then adds padding, so the LayoutContainer?'s border size is bigger than the viewport size.

You need to make your outer LayoutContainer? without padding or margin. You can add a nested LayoutContainer? with margin to get what you want.

comment:4 Changed 12 years ago by guest

Resolution: fixed
Status: closedreopened

Thanks, the nested LayoutContainer? did do what I wanted to do. I do have another related question, though. When I was playing around with margins and padding (before I opened this ticket) I also tried adding margin to tabC1 up in the style block of the example.

#tabC1 { margin: 40px; }

This seemed to have no effect at all (in Firefox or IE.) Now I notice that if I inline the style...

<div id="tabC1" dojoType="dijit.layout.TabContainer" layoutAlign=client style="margin: 40px;">

it does produce the desired effect as well without using the nested LayoutContainer?.

Is there another portability reason to use the nested LayoutContainer? instead of adding margin to the TabContainer? directly? If not, shouldn't I be able to set the margin of the TabContainer? without having to inline the style?

comment:5 Changed 12 years ago by bill

Resolution: fixed
Status: reopenedclosed

There's another open bug(s) about the id attribute not getting copied from the srcNodeRef (the original HTML) to the template nodes; that's the cause of the

#tabC1 { ... }

not working in 0.9. It'll be fixed in 1.0.

Note: See TracTickets for help on using tickets.