Vaadin 10 Dialog emulating Vaadin 8 Window Caption

Question

Using Vaadin Flow Java API I would like to emulate a Vaadin 8 Window feature: particularly I need to emulate Caption behaviour. I mean a fixed top "Title" not scrollable as the real content of the Dialog. Anyone can tell me some Example I could learn from ? Thanks in advance

This is the workaround I found.

public MainView() {
    Button button = new Button("Click me",
            event -> {
                Dialog dialog = new Dialog();
                HorizontalLayout horizontalLayout = new HorizontalLayout();
                VerticalLayout verticalLayout = new VerticalLayout();
                Div headerDiv = new Div();
                Div bodyDiv = new Div();
                bodyDiv.getElement().getStyle().set("overflow", "auto");
                bodyDiv.getElement().getStyle().set("max-height", "420px"); // !!!
                dialog.add(headerDiv, bodyDiv);
                headerDiv.add(horizontalLayout);
                bodyDiv.add(verticalLayout);
                horizontalLayout.add(new Label("Hi there !"));
                for (int i = 1; i <= 20; i++) {
                    verticalLayout.add(new TextField("TextField_" + i));                        
                }
                dialog.open();                  
            });
    add(button);
}

The trouble is that I have to fix max-height size to avoid scrolling of all the contained components. So I cannot take advantage from the auto-size behaviour of the Dialog Container. Also tried using setFlexGrow, but I did not reach the solution. Any Hint ?

score 0 · Answer 1 · answered Sep 01 '18 at 09:29

In Vaadin 10+ there is no component called Window, but there is component called Dialog. It does not have Title like Window, but otherwise it has similar baseline. I.e. it is popup. Based on your question you have found already that.

Dialog itself is component container, which means you can add components there. I would just create e.g two Divs (the simplest of the layout components in Vaadin 10). I would style the first one to have fixed height and place the Title there. And then I would apply component.getElement().getStyle().set("overflow", "auto") to the other one, which is the actual content body. The mentioned style will enable the scrollable feature. You could potentially use VerticalLayout / HorizontalLayout instead of Div as well depending what you need.

See also: https://vaadin.com/docs/v10/flow/migration/5-components.html

This does not resolve my problem because I think there is some kind of "overflow: auto", already set in some root element of Dialog, that override the behaviour of all contained elements — Barney_IT, Oct 07 '18 at 06:16
There is more discussion about implementation details here: https://vaadin.com/forum/thread/17362348/vaadin-10-dialog-emulating-vaadin-8-window-caption — Tatu Lund, Dec 12 '18 at 06:48

Vaadin 10 Dialog emulating Vaadin 8 Window Caption

1 Answers1