TabSheet width

I have a TabSheet which I want to fill the full width of its container (a CssLayout).


TabSheet tabSheet = new TabSheet();
tabSheet.setSizeUndefined();
tabSheet.setWidth("100%");

(I have tried tabSheet.setSizeFull() but get very erratic height behaviour)

When first rendered, the width is limited to the width of the components on the first tab of the TabSheet. When I click another tab, the TabSheet is expanded to full width.


(first rendering)


(after clicking on another tab)

The second also looks a bit off because of the combination of width 100% with CSS margin. That’s a minor problem. Is there a workaround to get the full width on first rendering?

The full hierarchy is somewhat convoluted:

VerticalLayout → HorizontalSplitPanel → CssLayout → TabSheet (outer) → CssLayout → TabSheet (inner) → CssLayout

The outer TabSheet renders correctly from start.

Hi Nils,

Try to put the tabsheet’s width to null.

tabSheet.setWidth(null);

Also, maybe you’ve got the tabsheet’s container with other size rather than 100%.

HTH,

Javi

Width null shrinks the TabSheet further. The container is width 100%. When I click another tab, the TabSheet expands to expected width.

Hi Nils,

You are right, does shrinking on contents based way, but if you do this and all the tabs fits to its contents, also the first one, maybe and I say maybe (I don’t know how is your code), the tab that shows different, does not have a width defined for its contents.

I try to tell that, if you are using a template to build the tab contents, the behaviour should be the same and I recommend you that append
?debug
in your application URL to view what is happening with the tab, but if you are using an specific component for each tab, probably the width of the Layout in the second tab is not set properly.

Cheers,

Javi

Ah, I see what you mean. The content of all tabs (a CssLayout) have width 100%.

Additional info: If I click on another tab and then back to the first tab, the TabSheet stays expanded to full width.

Hi Nils,

Right now I have no idea, try the ?debug and see what is happen with the tab. remember to set production mode to false, you can see more info in the book of vaadin, chapter 12
Debug and Production Mode

Can you add some code snippet? It could be useful.

Javi

To me it looks like some layout in between the outer tabsheet and inner tabsheet doesn’t have 100% width. Check your author-tab’s content to see that every layout has the width defined. An easy way to find what is bugging this might be to add ?debug to the end url, as Javier said, and hit the AL (Analyze layouts) button. That should tell you if you somewhere have sizings defined that can’t work (like 100% width within undefined width)

Hi Nils,

I’ve been playing a little with CssLayout and various components inside it, the first thing I saw is that a Label always have got a 100% width and if you want to fit to a specific one you should put explicity the width you desire, but many other components does not and adjust to a default size of components, for example a TextField fits to a width predefined but less than 100%.

I see the two screeshots you provide int the initial post and I see that the tab that doesn’t fill the full width has got Links but not Labels, and the other one is full of Labels, the question is, can you add an empty Label on the second tab and make a try?

Cheers,

Javi

Thanks Jens and Javier! I have got sidetracked by another project, but I’ll check out your suggestions ASAP…

Javier, Jens

Many thanks, you put me on the right track. ?debug didn’t show any layout problems, but I looked over everything again and realized that I hadn’t set width 100% on the CssLayout contained by the outer TabSheet. With

setSizeFull()

on that layout I now get a consistent inner TabSheet. I still have a right margin problem, but that is due to my CSS overrides. Working on that I get back to original problem:

  • The outer tab sheet renders correctly
  • The CssLayout within the outer tab sheet has 100% width and renders correctly
  • The inner tab sheet has 100% width (via setSizeFull()), but does not render to full width

Checking the generated HTML in Firebug I can see that the outer tab sheet’s contained CssLayout has a (full) width set with element style on the

<div class="v-csslayout">

element. The

<div class="v-csslayout-margin">

and

<div class="v-csslayout-container">

however do not, so they are sized to fit the fixed width labels, with fixed width captions and that width constrains the inner tab sheet.

I have tried adding a Label first in both the CssLayout of the outer tab sheet and the CssLayout of the inner tab sheet , hoping that its 100% width would restore the full width to the inner tab sheet, but to no avail.

A CSS override, setting the width of the outer CssLayout’s margin and container divs to 100% gives me full width, but doesn’t work with the margin (the divs become too wide).

OK, I think I have nailed it down now. I have made a small test project, with just the main layout components. I cannot reproduce the width problems, but Debug mode Analyze layouts reports errors when I mix 100% width/undefined height with setSizeFull() (reasonably enough). 100% width/undefined height on both CssLayouts and TabSheets produce a result without obvious problems. setSizeFull() on both CssLayouts and TabSheets gives the TabSheets the wrong height if there are other components in the same CssLayout, i.e. I cannot have both a Label and a full size TabSheet in the same CssLayout. I’ll see if I can get 100% width/undefined height on all levels to produce a reasonable result with actual content too.

If I switch to VerticalLayouts and set expand ratio to 1.0 for the TabSheets I get something which looks good. That is an alternative, but will cause me new problems. In a CSS layout I can override CSS to render labels the way I want them, with a VerticalLayout that isn’t possible.