Making a form section with multi columns responsive to browser window size

[tekhong]

Hi all

I have a form section with multiple columns of fields

Is there an attribute of the form section to set to make the multi column fields display in a single column depending on browser window width?

Your advice is much appreciated

Thanks & Best Regards

[barrymavin]

Hi Tek Hong,

No there is no such attribute. Think about it, any app would be unusable if the window was resized to be just 100 pixels wide. Try it with word, excel, any application. Clearly common sense needs to be used when resizing a window.

[HankFay]

Hi Barry,

I think what TH means is using column dividers, in which case a form section will display them vertically in the Phone size factor.

Hank

[barrymavin]

Hi Hank, no thats not possible. The dividers are for laying out columns horizontally. The code is generated based on the semantics of the attributes and the height of the section that you have designed. Switching from horizontal view to vertical view requires altering the section height which causes the whole page to relayout.

There are many factors involved with this: Stretch last section, accordion stack, etc.

If you are designing for a very small factor then use a TabView or an accordion stack.

[tekhong]

Hi Barry

If my form section has multiple columns of fields, and if only one column of fields are visible on a phone screen, can we use swipe left/right gesture to view the adjacent column of fields in form section?

Your advice is much appreciated

Thanks & Best Regards

[barrymavin]

Hi Tek Hong,

No, the form section columns are laid out horizontally across the available space.

If you want to do that, use a TabView with TabBar hidden and handle the swipe gestures in delegates.

Either that or split the form up into different stacked accordion sections as you were previously advised.

[HankFay]

Hi Tek Hong,

this browser app:

1195

will turn into this when it runs as a Phone app:

1196

Hank

PS: have you tried this and not had it work?

[tekhong]

Hi Hank

Yes, that is the behaviour I need but I could not get it to work that way.
I selected phone view, click deploy and click preview.
As I reduced the browser window, the 2nd column fields are not visible

Is there some settings that I miss out?

Your advice is much appreciated

Thanks & Best Regards

[tekhong]

Hi Hank

If I do a fresh app with single page and single section, I can get the responsive UI effect that you showed

If I have an existing app and add a column divider and move some fields over the 2nd column, I cannot get the form section to work the way I need as I reduce the browser window

Any idea what I have been missing?

Thanks & Best Regards

[barrymavin]

Hi Tek Hong,

You cannot reduce the browser window size of a phone. So clearly you are not using the "Phone App View" which is what Hank is referring to. It sounds like you are using the "Web App View" and "Preview" from that.

You have four views available for previewing an App as you build it.

Desktop
Web
Tablet
Phone

I've already explained about "Web Apps". Design for the expected user experience if they are using tiny browser windows (which is highly unlikely).

If you are building a phone app then use "Live View" and the code generated will be responsive to the phone.

"Preview" is generating the code for a web browser NOT a phone. It's there to simplify with the debugging of UI navigation, dialog panels and JavaScript delegates. It is NOT a PhoneGap native App for the phone.

[HankFay]

As Barry said. This one:

1198