CustomLayout issues!

I am having trouble using CustomLayout for a pretty simple html page that I want to use as the base of my layout. The problem is that I don’t get anything on the page. I added some images to the html to make sure that it was being loaded properly and sure enough the images turned up but none of my div elements worked the way I intended them to work. I have tested the html in firefox and chrome and it turns out fine. My vaadin test is also being done in the same browsers. Here is the html source code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Page</title>
<style type="text/css">

#TitleBar {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:32px;
	z-index:1;
	background-image:url(../images/MainTitle.png)
}
#Toolbar {
	position:absolute;
	left:150px;
	top:4px;
	width:872px;
	height:28px;
	z-index:2;
	border-color:black;
	border-left:thin solid;
	border-top:thin solid;
	border-right:thin solid;
}
#SearchBar {
	position:absolute;
	left:153px;
	top:7px;
	width:246px;
	height:22px;
	z-index:3;
}

</style>
</head>

<body>
<div id="TitleBar"></div>
<div id="Toolbar"></div>
<div id="SearchBar"></div>
<p>&nbsp;</p>
</body>
</html>

Also, is there a better way of placing vaadin controls in elaborate layouts that are easily done through html rather than handcrafting? I tried using the XHTML label and working around that but it became a pain pretty quickly because getting elaborate layouts with multiple images and divs are impossibly to do using any widgets system.

Hi,

With a quick look it seems your layout doesn’t enforce the height. If you are using it inside a non-sized component you will most likely get quite short layout. Try wrapping your elements in a div element and giving it an explicit height. Calling setHeight(“100%”) or setSizeFull() for all parent components in Vaadin code might resolve your issue too.

cheers,
matti