Label on top of input field

[former_member253524]

Hello Folks,

I am working on UI5 application and need to develop following screen where labels are always on top of input field.

I tried with “ResponsiveLayout”, “Vertical Layout” by setting span but it is not working as I want. I also tried "Hbox" but not useful. Kindly guide me in achieving this.

Thanks in advance.

Regards,

S.Jain

[saivellanki · Accepted solution]

Hi S.Jain,

Is this application going to be desktop / tablet specific. If so, you can make use of HBox / VBox controls combination with some CSS to set the margins.

I have tried to build a sample and I got this as output:

You can check the code here: Plunker

Also in the above sample, values are bound to model. So, if you press 'Zuruck' button, you can check all the values in alert.

Regards,

Sai.

[former_member253524 · Accepted solution]

Hi Sai,

Thank you for your inputs, its really valuable. But i have a concern about responsiveness. Application will be used for mobile and tablet purpose too so design doesn't seem to be responsive. It will look like this on small screen.

This application is going to support many languages so if we design form by traditional way using 'ResponsiveGridLayout'  We can achieve responsiveness but after translation if label is too long then it shows 3 dots in label so we have designed layout in this way where label is on top of input field. Could you please suggest how can i achieve responsiveness too for mobile/tablet purpose.

Regards,

Jain.

[saivellanki · Accepted solution]

Yeah that's the point. Tablet should work fine, but mobile it is not.

Need to check the alternative.

Regards,

Sai.

[former_member253524 · Accepted solution]

Also input fields creates too much spaces in between, how to remove those?

Kindly suggest if you find any alternative.

Regards,

Jain.

[gippy_singh]

You can change the layout property to layout="ColumnLayout" and set

maxContainerCols="2". It should render the form with labels on top.

[ChrisSolomon]

Did you try using the responsive layout and then setting your columns accordingly to size such that it "forces" your labels on top?

[former_member253524]

Christopher,

I tried but it doesn't help me as such. Its quite on trial and error basis so difficult to get such a layout using responsive.

Regards,

Jain.