CssLayout components wrapping.

Vaadin 6 / 7 / 8 Framework UI
1

Hi there!

I trying to use CssLayout example from the book:

public void init() {
CssLayout layout = new CssLayout();
        
// Component with a layout-managed caption and icon
TextField tf = new TextField("A TextField");
layout.addComponent(tf);
Label label = new Label("A Label");
label.setWidth(Sizeable.SIZE_UNDEFINED, 0);
layout.addComponent(label);
        
layout.addComponent(new Button("A Button"));

final Window mainWindow = new Window("Ehr Application");
mainWindow.setSizeFull();
setMainWindow(mainWindow);
mainWindow.addComponent(layout);			

}

Components are laid out vertically, but I expected another behaviour:

What is wrong?

2

Nothing is particularly wrong, it’s just that almost all of the core components are rendered with block level elements (I think TextField, NativeButton and NativeSelect are the only exceptions), hence each one wraps to a new line. Adding captions to any component will also cause the following ones to wrap to a new line (captions are rendered inside DIV elements).

You can of course control this mostly with CSS, by making all elements inside the CssLayout inline/inline-block elements.

3

Thank you for your answer, Jouni!

I did it with CSS, and it works great. That example from the book little confused me

http://vaadin.com/book/-/page/layout.csslayout.html

4

No problem.

Thanks for pointing out the error in the Book, seems exactly the opposite what should happen, no component is by default inline-block, not even inside CssLayout.

Made a ticket:
#5468

5

Hello,
I have the same problem but I can’t make it work.

I have a class
public class PanPhotos extends CssLayout

and I insert in the constructor…


		TextField tf = new TextField();
		tf.addStyleName("panPhoto");
		this.addComponent(tf);
		
		tf = new TextField();
		tf.addStyleName("panPhoto");
		this.addComponent(tf);

I have tried with the following in the css


.v-panPhoto {
    display: inline-block;    
}
.v-ie6 .v-panPhoto,
.v-ie7 .v-panPhoto {
    display: inline;
    zoom: 1;    
}


.v-textfield {
    display: inline-block;    
}
.v-ie6 .v-textfield,
.v-ie7 .v-textfield {
    display: inline;
    zoom: 1;    
}

and still my text fields are arranged in different rows.

where is my mistake ?

Thank you in advance

Yorgos Tryfon