AbsoluteLayout

Layout that allows the absolute positioning of components

View larger

Close

Responsive layouts are great but there are times when you absolutely positively need to make sure everything gets placed where you put it. If this is your use case, use this layout! Comes with a straightforward, simple-to-use API and does what it says.

Sample code

		Div red = new Div();
		red.getElement().getStyle().set("background-color", "red");
		red.setWidth("200px");
		red.setHeight("100px");
		Div green = new Div();
		green.getElement().getStyle().set("background-color", "green");
		green.setWidth("200px");
		green.setHeight("100px");
		Div yellow = new Div();
		yellow.getElement().getStyle().set("background-color", "yellow");
		yellow.setWidth("500px");
		yellow.setHeight("50px");

		AbsoluteLayout absoluteLayout = new AbsoluteLayout();
		final Html html = new Html("<h1><i>Hello</i> <b>world</b></h1>");

		absoluteLayout.add(html, 195,269);
		absoluteLayout.add(button);

		absoluteLayout.add(red,50,100);
		absoluteLayout.add(green,75,120);
		absoluteLayout.add(yellow,60, 60);
		
		for(int points = 0; points<7; points++) {
			Div blueCircle = new Div();
			blueCircle.getElement().getStyle().set("background-color","blue");
			blueCircle.getElement().getStyle().set("border-radius", "50%");
			blueCircle.getElement().getStyle().set("height", "50px");
			blueCircle.getElement().getStyle().set("width", "50px");
			
			int posX = (int)(285 + 200*Math.cos(points*2*Math.PI/7));
			int posY = (int)(325 + 200*Math.sin(points*2*Math.PI/7));
			
			absoluteLayout.add(blueCircle, posX, posY);
		}

Links

• Issue tracker
• View on GitHub

Compatibility