---
title: AbsoluteLayout
order: 11
layout: page
---

[[layout.absolutelayout]]
= AbsoluteLayout

ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/absolute-layout"]
endif::web[]

[classname]#AbsoluteLayout# allows placing components in arbitrary positions in
the layout area. The positions are specified in the [methodname]#addComponent()#
method with horizontal and vertical coordinates relative to an edge of the
layout area. The positions can include a third depth dimension, the __z-index__,
which specifies which components are displayed in front and which behind other
components.

The positions are specified by a CSS absolute position string, using the
[literal]#++left++#, [literal]#++right++#, [literal]#++top++#,
[literal]#++bottom++#, and [literal]#++z-index++# properties known from CSS. In
the following example, we have a 300 by 150 pixels large layout and position a
text field 50 pixels from both the left and the top edge:


[source, java]
----
// A 400x250 pixels size layout
AbsoluteLayout layout = new AbsoluteLayout();
layout.setWidth("400px");
layout.setHeight("250px");

// A component with coordinates for its top-left corner
TextField text = new TextField("Somewhere someplace");
layout.addComponent(text, "left: 50px; top: 50px;");
----

The [literal]#++left++# and [literal]#++top++# specify the distance from the
left and top edge, respectively. The [literal]#++right++# and
[literal]#++bottom++# specify the distances from the right and top edge.


[source, java]
----
// At the top-left corner
Button button = new Button( "left: 0px; top: 0px;");
layout.addComponent(button, "left: 0px; top: 0px;");

// At the bottom-right corner
Button buttCorner = new Button( "right: 0px; bottom: 0px;");
layout.addComponent(buttCorner, "right: 0px; bottom: 0px;");

// Relative to the bottom-right corner
Button buttBrRelative = new Button( "right: 50px; bottom: 50px;");
layout.addComponent(buttBrRelative, "right: 50px; bottom: 50px;");

// On the bottom, relative to the left side
Button buttBottom = new Button( "left: 50px; bottom: 0px;");
layout.addComponent(buttBottom, "left: 50px; bottom: 0px;");

// On the right side, up from the bottom
Button buttRight = new Button( "right: 0px; bottom: 100px;");
layout.addComponent(buttRight, "right: 0px; bottom: 100px;");
----

The result of the above code examples is shown in
<<figure.layout.absolutelayout.bottomright>>.

[[figure.layout.absolutelayout.bottomright]]
.Components Positioned Relative to Various Edges
image::img/absolutelayout-bottomright.png[width=60%, scaledwidth=80%]

[[layout.absolutelayout.area]]
== Placing a Component in an Area

Earlier, we had components of undefined size and specified the positions of
components by a single pair of coordinates. The other possibility is to specify
an area and let the component fill the area by specifying a proportinal size for
the component, such as " [literal]#++100%++#". Normally, you use
[methodname]#setSizeFull()# to take the entire area given by the layout.


[source, java]
----
// Specify an area that a component should fill
Panel panel = new Panel("A Panel filling an area");
panel.setSizeFull(); // Fill the entire given area
layout.addComponent(panel, "left: 25px; right: 50px; "+
                           "top: 100px; bottom: 50px;");
----

The result is shown in <<figure.layout.absolutelayout.area>>

[[figure.layout.absolutelayout.area]]
.Component Filling an Area Specified by Coordinates
image::img/absolutelayout-area.png[width=50%, scaledwidth=80%]


[[layout.absolutelayout.proportional]]
== Proportional Coordinates

You can also use proportional coordinates to specify the placement of
components:


[source, java]
----
// A panel that takes 30% to 90% horizontally and
// 20% to 80% vertically
Panel panel = new Panel("A Panel");
panel.setSizeFull(); // Fill the specified area
layout.addComponent(panel, "left: 30%; right: 10%;" +
                           "top: 20%; bottom: 20%;");
----

The result is shown in <<figure.layout.absolutelayout.proportional>>

[[figure.layout.absolutelayout.proportional]]
.Specifying an Area by Proportional Coordinates
image::img/absolutelayout-proportional.png[width=50%, scaledwidth=70%]


[[layout.absolutelayout.css]]
== Styling with CSS


[source, css]
----
.v-absolutelayout {}
.v-absolutelayout-wrapper {}
----

The [classname]#AbsoluteLayout# component has [literal]#++v-absolutelayout++#
root style. Each component in the layout is contained within an element that has
the [literal]#++v-absolutelayout-wrapper++#. The component captions are outside
the wrapper elements, in a separate element with the usual
[literal]#++v-caption++# style.
ref='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
<a id='n28' href='#n28'>28</a>
<a id='n29' href='#n29'>29</a>
<a id='n30' href='#n30'>30</a>
<a id='n31' href='#n31'>31</a>
<a id='n32' href='#n32'>32</a>
<a id='n33' href='#n33'>33</a>
<a id='n34' href='#n34'>34</a>
<a id='n35' href='#n35'>35</a>
<a id='n36' href='#n36'>36</a>
<a id='n37' href='#n37'>37</a>
<a id='n38' href='#n38'>38</a>
<a id='n39' href='#n39'>39</a>
</pre></td>
<td class='lines'><pre><code>