There is java.awt.BorderLayout like layout also in the Vaadin. Please, test the new
BorderLayout add-on


Okay, I found the BorderLayout component and it in theory fits my need exactly. I am new to Vaadin and have just started working with the BorderLayout component. So, if there is documentation I can read that clears up any of he quirks I describe below, I would be happy to read it if you link me to it. Otherwise, here are some oddities I have come across so far. My assumption is that because BorderLayout is at version 0.3, it is not completely reliable nor well documented at this time. I will continue to search the forums for answers that may be out there already.

  1. You can only add one component to each region (N, S, E, W). The following code when rendered only had the xxx2 TextFields visible. I worked around this by adding one more layer of a container component before adding my content components. Maybe this is expected, but you are able to “addComponent” multiple times to other layout components.
    borderLayout.addComponent(new TextField("north1"), BorderLayout.Constraint.NORTH); borderLayout.addComponent(new TextField("north2"), BorderLayout.Constraint.NORTH); borderLayout.addComponent(new TextField("east1"), BorderLayout.Constraint.EAST); borderLayout.addComponent(new TextField("east2"), BorderLayout.Constraint.EAST); borderLayout.addComponent(new TextField("west1"), BorderLayout.Constraint.WEST); borderLayout.addComponent(new TextField("west2"), BorderLayout.Constraint.WEST); borderLayout.addComponent(new TextField("south1"), BorderLayout.Constraint.SOUTH); borderLayout.addComponent(new TextField("south2"), BorderLayout.Constraint.SOUTH);
  2. .v-borderlayout-myclass does not work as the it should according to how Vaadin is supposed to generate class names for components (Book of Vaadin: 8.3.1). I updated my CSS to look for v-verticallayout-myclass instead as this is what is actually generated for the component. Documentation should be updated or this should be fixed to fit the Vaadin model. Maybe this is just something I don’t understand as this is a “custom” component and not native. I see that it extends VerticalLayout.
  3. Finally, the thing that brought me here as I couldn’t figure out how to work around it. My borderlayout html container is rendered as follows:
    <div class="v-verticallayout v-verticallayout-myclass myclass" style="overflow: hidden; width: 1000px; height: 203px;">
    Where does that height:203px come from? I want my borderlayout to be height:100% and have assigned it to be so in mytheme/style.css. But, because the component has a hard-coded style height, I cannot use the stylesheet for control. (I looked at the BorderLayout.class and see there is minimumHeights…maybe that is where it comes from. Is there a way to clear it? Do i have to set it to setHeight(“”)? …just saw that setExpandRatio() requires height or width to be set, maybe that plays a part.

    update: ok, I think the gist of Vaadin is, "for the sake of compatibility, do all width and height settings via Component setWidth/setHeight methods. I got the centerLayout to be height=100%, but needed to do
    of the following…
    borderLayout.setHeight("100%"); borderLayout.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    due to the fact that only
    is overridden. This causes (the debug window helped here) only the BorderLayout to get height=100% or the BorderLayout.mainLayout to get height=100%, but not both…which caused the “relative vs undefined, component/layout” Vaadin issue when dealing with sizes.

Sorry if these questions are obvious. And, maybe I shouldn’t be expecting this layout component to behave exactly like layout components described in the Book Of Vaadin. I’m new :slight_smile:


What would it mean to add multiple components to a location? Adding them in a vertical stack or horizontally or something else? As far as I can see, there is no one correct solution, and anything the layout would try to do would just make things harder for those who want a different layout.

Just add a HorizontalLayout or a VerticalLayout or some other layout to the BorderLayout slot to handle multiple components in a location the way you want. You can subclass BorderLayout to make this easier if you always want it to work in the same way.

BorderLayout is not a fully customized layout with a custom client side widget. Instead, it is composed on the server side from standard layouts - it is just a helper class for handling these kinds of layout situations easily. It would be nice enhancement to have separate style names automatically applied to the components in each slot, though.

Some of the other layout add-ons in the directory do have fully customized client side parts.

Yes - Vaadin calculates layout slot sizes as pixels on the client side to be able to support certain layout features consistently across all supported browsers. This applies to most layouts, both standard and add-on.

Certain layouts (e.g. CssLayout and some add-on layouts) do allow you to control more using CSS.

This sounds like a bug in the add-on - maybe Johannes has time at some point to fix it.


I finally updated the
add-on to the newest Vaadin 7 beta.


Hey Johannes,
This is really cool add on. But, Is it possible to increase the Width of East and West Component by coding? In demo itself it(East and West widths) seems like a stable one.