Caption position in a form using GridLayout

Vaadin 6 / 7 / 8 Framework UI
1

Hi

I use a GridLayout for my form but the captions are on top of the Textfield.
I need to use a GridLayout because my form is on many columns.

I try to have then on the left instead … but I can’t figure out how to do that.

Any ideas?

2

Each layout chooses where to place the captions, and most - including GridLayout - place them just above the component. FormLayout is the exception to this rule, placing the captions on the left.

Currently your options are to either use another layout (e.g. CustomLayout) or not use captions but instead add explicit labels in your layout in cells left of the fields, or to use
CustomField add-on
 as a wrapper for your fields.

You could encapsulate the CustomField approach in your own field factory (based on DefaultFieldFactory), doing the wrapping into a CustomField containing a light-weight CssLayout with a label and the original field without a caption. Likewise, you probably could automate moving captions into separate cells of a GridLayout in a form subclass. Not sure which option is best in your case.

3

Sorry to bring this up again, but since there still doesn’t exist a convenient way to achieve the mentioned behaviour in Vaadin 7 I figuered your response would still be very valid.

But something like

private class WrappedComponent extends CustomComponent {

    public WrappedComponent(Component mainComponent) {

        CssLayout root = new CssLayout();
        Label caption = new Label();

        caption.setContentMode(ContentMode.HTML);
        caption.setIcon(mainComponent.getIcon());
        caption.setCaption(mainComponent.getCaption());
        root.addComponent(this.caption);

        mainComponent.setIcon(null);
        mainComponent.setCaption(null);
        root.addComponent(this.mainComponent);

        mainComponent.setSizeUndefined();
        caption.setSizeUndefined();
        root.setSizeUndefined();
        setSizeUndefined();

        setCompositionRoot(root);
    }
}

inside a GridLayout will not actually get the caption label to be displayed to the left of the mainComponent! The GridLayout somehow overrides the premise of the CssLayout as it is documented in the Vaadin Docs: "By default, the contained components are laid out horizontally and wrap naturally when they reach the width of the layout […]
". (https://vaadin.com/docs/-/part/framework/layout/layout-csslayout.html)