Dialog with inside FormLayout. Width grows every TexField added

General
1

Hi all, sorry for my english.
I need help about this question.
I have a Dialog with inside a FormLayout. Every time i add a TextField in the FormLayout, the width of Dialog grows.
This is my code:

        Dialog myDialog = new Dialog();

        FormLayout formLayout = new FormLayout();

        // Layout Inserimento dati
        TextField textField1 = new TextField("textField1");
        TextField textField2 = new TextField("textField2");
        TextField textField3 = new TextField("textField3");
        TextField textField4 = new TextField("textField4");
        TextField textField5 = new TextField("textField5");
        TextField textField6 = new TextField("textField6");
        formLayout.add(textField1);
        formLayout.add(textField2);
        formLayout.add(textField3);
        formLayout.add(textField4);
        formLayout.add(textField5);
        formLayout.add(textField6);

        myDialog.add(formLayout);
        myDialog.open();

You can see different widths in attachment.

I tried to set the width of the dialog in percentage ( myDialog.setWidth(“70%”) ) with a strange effect: the Dialog remain the same but the FormLayout is reduced !

What am I doing wrong ?
Any help is appreciated.

18154469.png
18154472.png
18154475.png
18154478.png
18154481.png

2

Hi Carlo,

I’m guessing this is an unintended effect of the dialog (having no fixed width set) scales itself to fit its contents, while the FormLayout (which has 2 columns by default, but wraps to 1 if there’s not enough space for 2) wraps itself to a single column, but somehow the intrinsic width of either still increases like that, which I don’t quite understand.

However, the Dialog’s width (prior to V14.2) does not work with percentages. Try using a px or vw value instead – that should at least fix the width of the dialog.

3

Hi Rolf,
thanks for the reply!
I just tryed to set the dialog width usign a vw value and and that’s just what I wanted.
I didn’t want to set a fixed width using px, for this reason I tried to use the percentage.

I just started using vaadin to try it out. It’s a wonderful product.

Thanks again and have a good day.