Nested VerticalLayout and HorizontalLayout Issue

Is anyone getting issue on Label/TextField caption display issue after applied Valo Schema?

For example:
VerticalLayout (setSizeFull)
|—HorizontalLayout (width=“100%” height=undefined)
| |----- Label (Caption = “Total Record Count …”, sizeFull)
| |----- Button (Caption = “…”, )
|—Table (setSizeFull, expendRaido=1.0f)

In above design, the Label caption will be cutted off, such as “Total Record Count” will not be displayed.
Anyone know the issue?

The issue is this:

  1. Out of the two components (HorizontalLayout & Table), you have expanded the table to the fullest (expandRatio = 1),
  2. At the same time, the height of the HorizontalLayout is undefined, so it is squeazed to zero height.
  3. Thats why, you dont see the HorizontalLayout or the components inside it (Label & Button).

Vikrant thanks for quick reply.
However, no matter how I set the height and width, the Label caption will always be cut.
I tested in 7.3.5 and 7.3.6 all the same~
Not sure what is the root cause?

I have attached the error screenshot.
Following is the sample error source code

public Component getViewContainerComponent(){
	VerticalLayout root = new VerticalLayout();
	root.setSizeFull();
	
	HorizontalLayout toolbarContainter = new HorizontalLayout();
	toolbarContainter.setWidth("100%");
	toolbarContainter.setHeight("50px");
	
	Label l1 = new Label();
	l1.setSizeFull();
	l1.setCaption("Test Lable Information...........");
	toolbarContainter.addComponent(l1);
	toolbarContainter.setExpandRatio(l1, 1.0f);
	
	Button b1 = new Button("Refresh");
	b1.setWidthUndefined();
	b1.setHeightUndefined();
	toolbarContainter.addComponent(b1);
	
	root.addComponent(toolbarContainter);
	
	
	Table t = new Table();
	t.setSizeFull();
	IndexedContainer container = new IndexedContainer();
	container.addContainerProperty("Date", Date.class, null);
	container.addContainerProperty("Work", Boolean.class, null);
	container.addContainerProperty("Comments", String.class, null);
	t.setContainerDataSource(container);
	
	for (int i=0; i<10; i++) {
		Calendar calendar = new GregorianCalendar(2008,0,1);
		calendar.add(Calendar.DAY_OF_YEAR, i);
		
		// Create the table row.
		Item newItem = container.addItem(i);
		newItem.getItemProperty("Date").setValue(calendar.getTime());
		newItem.getItemProperty("Work").setValue((i%7)!=0?true:false);
		newItem.getItemProperty("Comments").setValue("Test-" + i);
	}
	root.addComponent(t);
	root.setExpandRatio(t, 1.0f);
	return root;
}

17431.png

I Just Found the cause:
If I use following code, then the Label Display will be Cutted.
Label l1 = new Label();
l1.setCaption(“Test Lable Information…”);

But if I change to following code, then Label display will be correct:
Label l1 = new Label(“Test Lable Information…”);

Is this consider a Valo Themes Bug??

I think you should set the expand ratio AFTER you have added the button & label components to the toolBarContainer:

toolbarContainter.setExpandRatio(l1, 1.0f);