CssLayout - Hrizontal display problem

Hi all,

I am tying to display my components like the black bricks in http://demo.vaadin.com/sampler#CssLayouts
(There must be some problem here, because the css of the demo is not accessible => http://demo.vaadin.com/VAADIN/themes/sampler/layouts/cssexample.css gives 404).

Anyway,

Here is my source code :


public class SomeCoolComponent extends CustomComponent{
	
	public Panel cells_panel;
	
	VerticalLayout layout = new VerticalLayout();
	
	CssLayout cells_layout = new CssLayout(){
		
		@Override
	    protected String getCss(Component c) {
	        if (true) {
	            // Color the boxes with random colors
	            int rgb = (int) (Math.random()*(1<<24));
	            return "display:inline-block; background: #" + Integer.toHexString(rgb);
	        }
	        return null;
	    };
	
	};
	public SomeCoolComponent(){
		cells_panel = new Panel();
		cells_panel.setWidth("500px");
		cells_panel.setHeight("600px");
		addIconToPanel("../icons/64x64/extension-icon.png", "a Cell");
		addIconToPanel("../icons/64x64/extension-icon.png", "a Cell");
		addIconToPanel("../icons/64x64/extension-icon.png", "a Cell");
		addIconToPanel("../icons/64x64/extension-icon.png", "a Cell");
		addIconToPanel("../icons/64x64/extension-icon.png", "a Cell");
		addIconToPanel("../icons/64x64/extension-icon.png", "a Cell");
		cells_layout.setWidth("500px");
		cells_panel.addComponent(cells_layout);
		layout.addComponent(cells_panel);
		layout.setWidth("600px");
		layout.setHeight("600px");
		layout.setMargin(true);
		setCompositionRoot(layout);
    }

	
	public Embedded addIconToPanel(String image_url, String title){
		Label tmp = new Label("this is a test");
		tmp.setSizeUndefined();
		cells_layout.addComponent(tmp);
		return null;
	}
	
}

And it gives me… that :

The question is, Why does only one labels by row is displayed ?
I juste want them to look like the demo (X labels by row, dynamically adapted by screen size. (I thought I read somewhere that default display for CssLayout was horizontal and not Vertical… So it seems strange…)

Does someone here knows what I have done wrong ?

Thanks !

Hi,

I am not that big CSS expert like some people on this Forum, but i’d suggest you to pay attention to the fact that there is totally no width defined for your labels, so I guess that’s what forces those to be stretched. Also in the demo that you’ve mentioned - the
float:left
property is used (AFAIK), along with the width defined - it’ll let you display your labels in a flow-like style.

cheers,
sasha

Vaadin labels are sent to the browser as div tags.
In HTML div are rendered as “block” which kind of mean “only one per line”

Put in your CSS “display:inline-block” for the elements in your layout (you will need to check the html structure of the layout to find the right selectors)