Layouting Table with Panels

Hi

I’m trying to set the size of panels in a table. My table looks like:

Table table = new Table();
		table.setWidth("500px");
		table.addContainerProperty("Attribute", String.class, null);
		table.addContainerProperty("Value", Panel.class, null);
		table.setColumnExpandRatio("Value", 1);

After than i put a label in the panel and this into the table:

Label value = new Label();
value.setCaption("long text");
panel.addComponent(value);
table.addItem(new Object[] { "TestAttribute", panel }, new Integer(1));

The caption of the Label could be very long. For this reason i use a stylesheet with the “white-space: normal”-attribute. This works perfect.
But now the panel should fit automatically its size. But i did not get it. How do i set the sizes of the components? I think i’ve tried almost all combinations of setting the size for the components. Once the height of the Layout is to big, another time the panel width is to small.

Greets

To put it short, if you want the label to wrap if it’s too long, you need to give a fixed or 100% width for the panel.

Label has by default 100% width, so you must not put it in a layout that has undefined width (shrink-to-fit), as that would create a paradox. Word wrap is only possible if Label has 100% width, so if you want word wrap, you can’t set it undefined. So, you must give a defined (fixed or relative) width for the panel. If I remember correctly (might not), you should be able to put relative-width components in Table.

But please notice that Table doesn’t behave well with rows with varying heights. More exactly, scrolling won’t work properly.

Hi

i still have the problem. I cann’t get the optimal cell size. Here are the code i use:

Table table = new Table();
table.setWidth("500px");
table.addContainerProperty("Attribute", String.class, null);
table.addContainerProperty("Value", Panel.class, null);
table.setColumnExpandRatio("Value", 1);

String attribute1 = "test1";

Panel panel1 = new Panel();
panel1.setWidth("100%");

Label value1 = new Label();
value1.setStyleName("wrap");
value1.setWidth("100%");
value1.setCaption("long text1");

panel1.addComponent(value1);

String attribute2 = "test2";

Panel panel2 = new Panel();
panel2.setWidth("100%");

Label value2 = new Label();
value2.setStyleName("wrap");
value2.setWidth("100%");
value2.setCaption("long text2");

panel2.addComponent(value2);

table.addItem(new Object[] { attribute1, panel1 }, 1);
table.addItem(new Object[] { attribute2, panel2 }, 2);

“wrap” refers to the css entry:

.v-caption-wrap .v-captiontext{
   white-space: normal;
}

Now the table has optimal width for column 1 and 2, but the height of the row is to big. There are a lot of empty space in the “Value” column.

I dont want to scroll within the table. But there are rows with varying heights, because the value of the label is unknown. Do you mean this behavior of the table?
If no, what can i do to get the optimum height?

Greets

Hi again

if i use for both columns the String class, it works perfect.

Table table = new Table();
table.setWidth("500px");
table.addContainerProperty("Attribute", String.class, null);
table.addContainerProperty("Value", String.class, null);
table.setColumnExpandRatio("Value", 1);

String attribute1 = "test1";

Label value1 = new Label();
value1.setStyleName("wrap");
value1.setWidth("100%");
value1.setCaption("long text1");

String attribute2 = "test2";

Label value2 = new Label();
value2.setStyleName("wrap");
value2.setWidth("100%");
value2.setCaption("long text2");

table.addItem(new Object[] { attribute1, value1.getCaption() }, 1);
table.addItem(new Object[] { attribute2, value2.getCaption() }, 2);

The row has different height, and the content fills the cell both in width and in height.

It seems that do anything wrong with the panel. But i have no idea what?

Greets