customLayout and 100% width not working...

Hi I have an HTML and CSS where I insert my Vaadin components.

When I set a certain DIV to width(100%) it simple doens’t set the size of the div so the componet disapears.

I’ve used this before and it always worked but this one is not for some wierd reason I could not get yet.

here are the sources

The problem is the [b]
[u]

[/u]adv_bar div
[/b]

BTW this is just a POC so the code is kind of a mess…

The CSS is only for setting margins and stuff no sizing, all sizing should be made in Vaadin.

	@Override
	public void init() {
		Window mainWindow = new Window("Layout Application");
		setMainWindow(mainWindow);
		this.setTheme("imobee");
		mainWindow.setContent(lay);

		TextField field = new TextField();
		field.setInputPrompt("search here");
		field.addStyleName("searchText_fix big");
		Button submitBtn = new Button();
		submitBtn.addStyleName("borderless fix_search_button");
		submitBtn.setIcon(new ThemeResource("img/searchBtn.png"));
		
		HorizontalLayout horz = new HorizontalLayout();
		horz.addComponent(field);
		field.setWidth("100%");
		field.setHeight(46, Sizeable.UNITS_PIXELS);
		horz.addComponent(submitBtn);
		horz.setSpacing(false);
		horz.setWidth("100%");
		horz.setVisible(true);
		horz.setExpandRatio(field, 1.0f);
		horz.setComponentAlignment(field, Alignment.TOP_CENTER);
		horz.setComponentAlignment(submitBtn, Alignment.TOP_CENTER);
		field.addStyleName("fix_search_field");

		HorizontalLayout horzAdv = new HorizontalLayout();
		CheckBox ck1 = new CheckBox("Casa");
//		ck1.setHeight(30, Sizeable.UNITS_PIXELS);
		ck1.setWidth("100%");
		CheckBox ck2 = new CheckBox("Apto");
//		ck2.setHeight(30, Sizeable.UNITS_PIXELS);
		ck2.setWidth("100%");
		Slider sl = new Slider("Quartos");
//		sl.setHeight(30, Sizeable.UNITS_PIXELS);
		sl.setWidth("100%");
		HorizontalLayout p = new HorizontalLayout();
		horzAdv.addComponent(ck1);
		horzAdv.addComponent(ck2);
		horzAdv.addComponent(sl);
		horzAdv.setHeight("25px");
		horzAdv.setWidth("100%");
		horzAdv.setVisible(true);
		horzAdv.setSpacing(true);
		horzAdv.setExpandRatio(sl, 1.0f);
		horzAdv.setComponentAlignment(ck1, Alignment.MIDDLE_CENTER);
		horzAdv.setComponentAlignment(ck2, Alignment.MIDDLE_CENTER);
		horzAdv.setComponentAlignment(sl, Alignment.MIDDLE_CENTER);

		lay.addComponent(horz, "search_field");
		lay.addComponent(horzAdv, "adv_bar");
		
		ThemeResource mapa = new ThemeResource("mapa.gif");
		lay.addComponent(new Embedded("", mapa),"map");
		lay.setSizeFull();

	}
		
		<div class="search_field" location="search_field"></div>
		<div class="adv_bar" location="adv_bar"></div>

I don’t see in any point of that code where you add anything to the main window, ie, mainWindow.setContent(lay);, so the result would be a blank page. As you said yourself, the code is a bit of a mess. If you’d tidy it up, you might find the error that way, and it would certainly be easier to help you out with it.

For some reason I removed it but there is a

mainWindow.setContent(lay);

just after i set the theme.

The page is showing the search box properlly… the only thing missing is the DIV where I insert that horizontal layout called adv_bar.

The width is always 0 when I use percentage in vaadin .setWitdh method, but if I set a constant width like .setWidth(“500px”); it shows up.

Sounds like you have something with a relative width (setWidth(“100%”)) inside something that has undefined width (setWidth(null) or setSizeUndefined()). Add ?debug at the end of your url and click “Analyze layouts” to see if it gives some suggestions. Firebug for Firefox, Chrome Inspector and Developer Tools for IE are also of great help in cases like this.

Thanks will look after it…

Yeah I’ve been using firebug to find the problem, but when I set anything to 100% all the upper divs get width=0;