Directory

← Back

AbsoluteLayout

Layout that allows the absolute positioning of components

Author

Contributors

Rating

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);
		}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2019-05-29
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 10+
Browser
Firefox
Opera
Safari
Google Chrome
Internet Explorer
Microsoft Edge
Online