FormLayout width

Vaadin 6 / 7 / 8 Framework UI
1

Hi,
I would like to ask you how to use FormLayout correctly. I have simple View with outer panel with outer layout (FormLayout), and inner panel with inner layout (HorizontalLayout). I would like to have outer panel, outer layout and inner panel independent width to inner content. Now when I put “big” content to the inner layout, then innerPanel and outerLayout fit to contents size. It’s is not what I expected. I would like to see scrollbars on innerPanel.

When I tried to replace FormLayout by VerticalLayout it works well. Any idea?

Thank you, Michal

Label formLabel = new Label("some text label xxx");
        Label formLabel2 = new Label("some text label xxx");

        HorizontalLayout horizontalLayout = new HorizontalLayout();
        horizontalLayout.addComponent(formLabel);
        horizontalLayout.addComponent(formLabel2);

        // scrolling panel if conent is wider
        Panel innerPanel = new Panel("Inner panel");
        innerPanel.setContent(horizontalLayout);

        // variant NOT ok - when innerPanel content is wider than innerPanel, innerPanel fit the content size
        // and is wider than outerPanel
        FormLayout outerLayout = new FormLayout();
        outerLayout.addComponent(innerPanel);

        // variant Ok - when innerPanel content is wider than innerPanel scrollbar appears
//        VerticalLayout outerLayout = new VerticalLayout();
//        outerLayout.addComponent(innerPanel);

        Panel outerPanel = new Panel("Outer panel");
        outerPanel.setWidth("200px");
        outerPanel.setContent(outerLayout);

        addComponent(outerPanel);
2

Looks like it could be a bug, yes.
(As a side note, analyzing the layouts, the labels have both 100% width and are inside a HorizontalLayout that has undefined width. This has probably nothing to do with the problem, since it works for HL).

Adding this to your theme, does it help (try with !important first)?

.v-scrollable > .v-widget {
overflow: inherit;
}

3

Hi Johan, thank you for quick reply. I have stupid question maybe. How can I add it to theme? I am using setTheme(“runo”).

4

If you are using the Vaadin plugin for eclipse, you can simply create a new theme by a few steps. If you are using some other IDE or want to do it yourself, I recommend reading
https://vaadin.com/book/-/page/themes.creating.html

But in short, with Vaadin 7, it would essentially be to create a folder “mytheme” and create mytheme.scss + styles.scss (and addons.scss if needed).
in the styles.scss:

@import "addons.scss"; // If needed
@import "mytheme.scss";

.mytheme{
  @include addons; // If needed
  @include mytheme;
}

in mytheme.scss:

@import "../runo/runo.scss";

@mixin mytheme{
  @include runo;

// Write your css here:
  .v-scrollable > .v-widget {
          overflow: inherit;
  }
}

and then use your theme
@Theme(“mytheme”) or as you seem to do it, setTheme(“mytheme”);

5

Forgot to mention that the team should reside under /VAADIN/themes/ folder