Layout spacing problem

Vaadin 6 / 7 / 8 Framework UI
1

I’m having a layout (spacing) problem. I’m probably doing something dumb, and would appreciate it if someone can point out what that is…

I have defined 5 labels and placed them inside a Horizontal layout. I want the first label (a file name) to take up 60 or 70% of the space, with the remaining 4 labels taking up 5-10% each. But as you can see from the attached picture, that doesn’t happen. Here is the code - can someone tell me what I’m doing wrong? Seems like I don’t quite understand how to lay things out on the screen…

The horizontal layout is being inserted into a tab in a TabSheet which in turn is being inserted into a Panel - and most of the Panel looks fine…Note that the entire panel is NOT being shown in the attached picture - only the relevant tab is displayed…

Thanks in advance,

nbc

TabSheet ts = new TabSheet();
Tab t = null;
VerticalLayout vlStats = new VerticalLayout();
ts.setWidth("100%");
statsPanel = new Panel();

…
…
gLabel = new Label(jgl.getLabel());
avgVal = new Label(" Avg: " + df.format(jgl.getAvgVal()));
maxVal = new Label(" Max: " + df.format(jgl.getMaxVal()));
minVal = new Label(" Min: " + df.format(jgl.getMinVal()));
lastVal = new Label(" Last: " + df.format(jgl.getLastVal()));

hlStats = new HorizontalLayout();
hlStats.setWidth("100%");

hlStats.addComponent(gLabel);
hlStats.addComponent(avgVal);
hlStats.addComponent(maxVal);
hlStats.addComponent(minVal);
hlStats.addComponent(lastVal);
gLabel.setWidth("70%");
avgVal.setWidth("5%");
maxVal.setWidth("5%");
minVal.setWidth("5%");
lastVal.setWidth("5%");
vlStats.addComponent(hlStats);

statsPanel.addComponent(vlStats);
ts.addTab(statsPanel);

11846.jpg

2

Hi,

you should set all your labels to 100% width (they are 100% by default so just remove your width settings) and use the
expand ratios
 of the HorizontalLayout, e.g.


gLabel = new Label(jgl.getLabel());
avgVal = new Label(" Avg: " + df.format(jgl.getAvgVal()));
hlStats.addComponent(gLabel);
hlStats.addComponent(avgVal);
// add rest of labels
hlStats.setExpandRatio(gLabel, 70);
hlStats.setExpandRatio(avgVal, 5);
// set expand ratios to other labels too

-Tepi

3

I see - I’ll give that a try - thanks very much!

nbc