Width of VerticalLayout inside Panel

When a Panel of undefined size, whose content is a VerticalLayout of full size, has a Caption that is wider than any component contained within the Layout, I am unable to align any of the contained components to the right.

Example:-

setTheme(“runo”);
Panel p = new Panel();
p.setSizeUndefined();
p.setCaption(“Results for Iteration #1”);
VerticalLayout v = (VerticalLayout) p.getContent();
v.setSizeFull();
Label n1 = new Label(“23.69”);
n1.setSizeUndefined();
v.addComponent(n1);
v.setComponentAlignment(n1, Alignment.MIDDLE_RIGHT);
Label n2 = new Label(“123.45”);
n2.setSizeUndefined();
v.addComponent(n2);
v.setComponentAlignment(n2, Alignment.MIDDLE_RIGHT);
Window mainWindow = new Window(“Panel Caption Test”);
mainWindow.addComponent(p);
setMainWindow(mainWindow);

The numbers will align roughly in the center. What do I need to do to get the numbers aligned to the right in the Panel?

Hi Andy,

If you add ?debug at the end of the url, you can show the debug console in the bottom right corner of your browser, press in Analize Layout, and the you find a problem that looks similar to this:

Vaadin DEBUG
- Window/1731840 "Panel Caption Test" (width: MAIN WINDOW)
  - VerticalLayout/8dfdd4 (width: RELATIVE, 100.0 %)
    - Panel/13d2b1c "Results for Iteration #1" (width: UNDEFINED)
      - VerticalLayout/1606a56 (width: RELATIVE, 100.0 %)
Layout problem detected: A component with relative width needs a parent with defined width.
Relative sizes were replaced by undefined sizes, components may not render as expected.

The solution is to add a Height and Width to your Panel and you’ll see your numbers aligned to the right, your code should look like:

        final Window mainWindow = new Window("Panel Caption Test");
        setTheme("runo");
        Panel p = new Panel();
        p.setWidth("300px");
        p.setWidth("200px");
        p.setCaption("Results for Iteration #1");
        VerticalLayout v = (VerticalLayout) p.getContent();
        v.setSizeFull();
        Label n1 = new Label("23.69");
        n1.setSizeUndefined();
        v.addComponent(n1);
        v.setComponentAlignment(n1, Alignment.MIDDLE_RIGHT);
        Label n2 = new Label("123.45");
        n2.setSizeUndefined();
        v.addComponent(n2);
        v.setComponentAlignment(n2, Alignment.MIDDLE_RIGHT);
        mainWindow.addComponent(p);
        setMainWindow(mainWindow);

HTH.

Javi

Hi Javi, and thanks for the speedy reply.
You are quite right. Using the debug panel to analyse the layout, shows the problems you describe in your answer, and by using your solution to fix the height and width of the panel, the layout problems disappear.
However, I do not want to fix the size of the Panel, prefering a more ‘fluid’ solution. If, instead, I set undefined size on the VerticalLayout, this also removes the layout problems detected by the ‘analyse layout’ tool. However, the numbers still do not align to the right of the Panel.
Can you think of any way to solve this problem without fixing the height and width as this would require adding scrollbars if the content overflowed the given size.

Hi Andy,

I supose that you are developing, or you are intending to develop, an application that will contain more components than the panel, If I’m right, when you design your main composition, the panel will be somewhere in a fixed place, or inside another component container, you should decide what dimensions you want for each component that you put in your application.

Anyway, if you want to avoid vertical scrollbar you should add p.setHeight(null), after review the code I wrote in my previous post I found that I’ve got an error, I wrote p.setWidth two times…, to avoid the horizontal scrollbar you should play with the width, calculating it with the longest value you put in the Layout.

If you review in the book the chapter dedicated to Layouts (
6. Managing Layout
) and the chapter
12. Advanced Web Application Topics
point 4 (
Debug and Production Mode
) You will find answers, to your question.

HTH.

Javi