Responsive textfields

Hi, I’m facing a little issue with a simple HorizontalLayout which contains several TextField components. In this way every time I add a new TextField to the layout, the new Component will be put beside the previous added. Now it happens that i need to add so many TextField such that they go over the margin of the browser window. I don’t want to horizontally scroll the broswer in order to reach all the TextField, but I really would like them to reorder themselves in a new row beside the full one. In this way if I continue to add new TextFields, when I reach the window limit, the new TextField will be placed under the first row, and go on…
How can I achieve something like this?

Hi Alberto,
try using CssLayout instead.

Best regards,
Sergey.

I manage to achieve what i wanted by using a CssLayout as root layout, then I put each dinamically created TextField inside an HorizontalLayout. After that with a little of CSS I got what I needed.
Just to understand it better if someone need it:

CssLayout root = new CssLayout()
root.addStyleName("root");
for( N times ) {
   HorizontalLayout wrapper = new HorizontalLayout();
   wrapper.addStyleName("item");
   TextField text = new TextField();
   wrapper.addComponent(text);
   root.addComponent(wrapper);
}

// CSS
.root {
        .item {
            padding-right:  20px;
            padding-bottom: 10px;
            vertical-align: bottom;
        }
    }

Hi,

You probably don’t need to add the HorizontalLayout there to wrap them at all. If they are placed under each other by default, just add similar css name to the textfields as you give fro you wrappers and add “float:left” rule with css.

cheers,
matti