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

[[layout.absolutelayout]]
= [classname]#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[]

Drag and drop is very useful for moving the components contained in an
[classname]#AbsoluteLayout#. Check out the example in
<<dummy/../../../framework/advanced/advanced-dragndrop#advanced.dragndrop.drop-on-component,"Dropping
on a Component">>.

[[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[]


[[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[]


[[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.




f='#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>
</pre></td>
<td class='lines'><pre><code><style>pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span><span class="cm">/* Inicialización en español para la extensión &#39;UI date picker&#39; para jQuery. */</span>
<span class="cm">/* Traducido por Vester (xvester@gmail.com). */</span>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="w"> </span><span class="nx">factory</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">	</span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="ow">typeof</span><span class="w"> </span><span class="nx">define</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s2">&quot;function&quot;</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">define</span><span class="p">.</span><span class="nx">amd</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span>

<span class="w">		</span><span class="c1">// AMD. Register as an anonymous module.</span>
<span class="w">		</span><span class="nx">define</span><span class="p">([</span><span class="w"> </span><span class="s2">&quot;../datepicker&quot;</span><span class="w"> </span><span class="p">],</span><span class="w"> </span><span class="nx">factory</span><span class="w"> </span><span class="p">);</span>
<span class="w">	</span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>

<span class="w">		</span><span class="c1">// Browser globals</span>
<span class="w">		</span><span class="nx">factory</span><span class="p">(</span><span class="w"> </span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">datepicker</span><span class="w"> </span><span class="p">);</span>
<span class="w">	</span><span class="p">}</span>
<span class="p">}(</span><span class="kd">function</span><span class="p">(</span><span class="w"> </span><span class="nx">datepicker</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span>

<span class="nx">datepicker</span><span class="p">.</span><span class="nx">regional</span><span class="p">[</span><span class="s1">&#39;es&#39;</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">	</span><span class="nx">closeText</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Cerrar&#39;</span><span class="p">,</span>
<span class="w">	</span><span class="nx">prevText</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&amp;#x3C;Ant&#39;</span><span class="p">,</span>
<span class="w">	</span><span class="nx">nextText</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Sig&amp;#x3E;&#39;</span><span class="p">,</span>
<span class="w">	</span><span class="nx">currentText</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Hoy&#39;</span><span class="p">,</span>
<span class="w">	</span><span class="nx">monthNames</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;enero&#39;</span><span class="p">,</span><span class="s1">&#39;febrero&#39;</span><span class="p">,</span><span class="s1">&#39;marzo&#39;</span><span class="p">,</span><span class="s1">&#39;abril&#39;</span><span class="p">,</span><span class="s1">&#39;mayo&#39;</span><span class="p">,</span><span class="s1">&#39;junio&#39;</span><span class="p">,</span>
<span class="w">	</span><span class="s1">&#39;julio&#39;</span><span class="p">,</span><span class="s1">&#39;agosto&#39;</span><span class="p">,</span><span class="s1">&#39;septiembre&#39;</span><span class="p">,</span><span class="s1">&#39;octubre&#39;</span><span class="p">,</span><span class="s1">&#39;noviembre&#39;</span><span class="p">,</span><span class="s1">&#39;diciembre&#39;</span><span class="p">],</span>
<span class="w">	</span><span class="nx">monthNamesShort</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;ene&#39;</span><span class="p">,</span><span class="s1">&#39;feb&#39;</span><span class="p">,</span><span class="s1">&#39;mar&#39;</span><span class="p">,</span><span class="s1">&#39;abr&#39;</span><span class="p">,</span><span class="s1">&#39;may&#39;</span><span class="p">,</span><span class="s1">&#39;jun&#39;</span><span class="p">,</span>
<span class="w">	</span><span class="s1">&#39;jul&#39;</span><span class="p">,</span><span class="s1">&#39;ago&#39;</span><span class="p">,</span><span class="s1">&#39;sep&#39;</span><span class="p">,</span><span class="s1">&#39;oct&#39;</span><span class="p">,</span><span class="s1">&#39;nov&#39;</span><span class="p">,</span><span class="s1">&#39;dic&#39;</span><span class="p">],</span>
<span class="w">	</span><span class="nx">dayNames</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;domingo&#39;</span><span class="p">,</span><span class="s1">&#39;lunes&#39;</span><span class="p">,</span><span class="s1">&#39;martes&#39;</span><span class="p">,</span><span class="s1">&#39;miércoles&#39;</span><span class="p">,</span><span class="s1">&#39;jueves&#39;</span><span class="p">,</span><span class="s1">&#39;viernes&#39;</span><span class="p">,</span><span class="s1">&#39;sábado&#39;</span><span class="p">],</span>
<span class="w">	</span><span class="nx">dayNamesShort</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;dom&#39;</span><span class="p">,</span><span class="s1">&#39;lun&#39;</span><span class="p">,</span><span class="s1">&#39;mar&#39;</span><span class="p">,</span><span class="s1">&#39;mié&#39;</span><span class="p">,</span><span class="s1">&#39;jue&#39;</span><span class="p">,</span><span class="s1">&#39;vie&#39;</span><span class="p">,</span><span class="s1">&#39;sáb&#39;</span><span class="p">],</span>
<span class="w">	</span><span class="nx">dayNamesMin</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;D&#39;</span><span class="p">,</span><span class="s1">&#39;L&#39;</span><span class="p">,</span><span class="s1">&#39;M&#39;</span><span class="p">,</span><span class="s1">&#39;X&#39;</span><span class="p">,</span><span class="s1">&#39;J&#39;</span><span class="p">,</span><span class="s1">&#39;V&#39;</span><span class="p">,</span><span class="s1">&#39;S&#39;</span><span class="p">],</span>
<span class="w">	</span><span class="nx">weekHeader</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Sm&#39;</span><span class="p">,</span>
<span class="w">	</span><span class="nx">dateFormat</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;dd/mm/yy&#39;</span><span class="p">,</span>
<span class="w">	</span><span class="nx">firstDay</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">	</span><span class="nx">isRTL</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span>
<span class="w">	</span><span class="nx">showMonthAfterYear</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span>
<span class="w">	</span><span class="nx">yearSuffix</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">};</span>
<span class="nx">datepicker</span><span class="p">.</span><span class="nx">setDefaults</span><span class="p">(</span><span class="nx">datepicker</span><span class="p">.</span><span class="nx">regional</span><span class="p">[</span><span class="s1">&#39;es&#39;</span><span class="p">]);</span>

<span class="k">return</span><span class="w"> </span><span class="nx">datepicker</span><span class="p">.</span><span class="nx">regional</span><span class="p">[</span><span class="s1">&#39;es&#39;</span><span class="p">];</span>

<span class="p">}));</span>
</pre></div>
