PDA

View Full Version : Making a form section with multi columns responsive to browser window size



tekhong
2015-12-19, 15:29
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
2015-12-19, 18:12
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
2015-12-19, 18:43
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
2015-12-19, 20:02
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
2015-12-20, 00:09
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
2015-12-20, 02:44
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
2015-12-20, 13:24
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
2015-12-20, 22:05
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
2015-12-20, 22:11
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
2015-12-20, 22:27
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
2015-12-21, 23:01
As Barry said. This one:

1198