AbsoluteLayout hides the added relative items

Hi all,

I’m new to Vaadin and I’ve only little knowledge of CSS.

I’d like to create a CustomComponent with an absoluteLayout so I can position some items within it. The idee is to create a time line with some bars who indicate a certain event.

This is what has been generated.

This is my code:

public class TimeBar extends CustomComponent {

private AbsoluteLayout mainLayout;

private Date startDate;

public TimeBar(Date startDate) {
	buildMainLayout();
	setCompositionRoot(mainLayout);
	this.startDate=startDate;
	addDays();
}

private void addDays(){
	Date current=Calendar.getInstance().getTime();
	long days=(current.getTime()-startDate.getTime())/(1000*60*60*24);
	long width=800/days;
	
	System.out.println("days: "+days+" width: "+width);
	for(int i=0;i<days;i++){
		Label l=new Label("day "+String.valueOf(i));
		l.setWidth(width, Label.UNITS_PIXELS);
		l.setVisible(true);
		mainLayout.addComponent(l,"top: 0px; left: "+i*width+"px;");
	}
}

private AbsoluteLayout buildMainLayout() {
	mainLayout = new AbsoluteLayout();
	mainLayout.setWidth("100%");
	setWidth("100%");
	
	return mainLayout;
}

}

And my Application:

public class Cosara2vaadindemoApplication extends Application {
VerticalLayout vLayout;

@Override
public void init() {
	final Window mainWindow = new Window("Cosara2vaadindemo Application");

	vLayout=new VerticalLayout();
	vLayout.setWidth("100%");
	vLayout.setHeight("100%");

	Calendar c=Calendar.getInstance();
	c.add(Calendar.DAY_OF_MONTH, -10);
	TimeBar timeBar=new TimeBar(c.getTime());
	
	vLayout.addComponent(timeBar);
	
	Button closeButton=new Button("close");
	ClickListener listener=new ClickListener() {
		
		@Override
		public void buttonClick(ClickEvent event) {
			close();
		}
	};
	closeButton.addListener(listener);
	vLayout.addComponent(closeButton);
	
	
	mainWindow.setContent(vLayout);
	setMainWindow(mainWindow);
	
}

}

Thanx for any advise

With kind regards
Bram Gadeyne

Don’t know if this is going to help, but it’s worth the shot. AbsolutLayout has by default 100% height, when again CustomComponent has undefined, and you should never have anything relative inside something undefined. call setSizeFull() inside buildMainLayout() (for CustomComponent).

Thank you Jens!

Now it works perfectly!

With kind regards
Bram