Yes, it got me ticked as well.

Hello Fernando,

I've taken a second look at the documentation and i understand now that the approach with responsiveness in SilkUi is different. I could reproduce the above example using the columns WebBlocks instead of the default containers. 

It would be nice though, if the default containers in SilkUi, generated by the scaffolding system, behave like in London theme by default. If i want more control over them, i could use the SilkUi columns systems.

Thanks again for the support.

Does this mean if i have a form with 20 input fields i have to manually add 20 two column structures and set the PhoneBehavioud to BreakAll?

Is there a complete sample app that shows how to create responsive forms using SilkUI?

Thank you very much

Hello Fabian,

First of all sorry for the really late reply, but somehow your post evaded our radars.

Actually, the original posts from this topic (July 2015) relate to the first versions of Silk. 
Since then some changes were made to Silk to make sure that the forms were easier to use.

The following example represents a form generated automatically by the platform scafolding.
Basically, I dragged and dropped an entity to my MainFlow 2 times. The first time generated the "List" page, and the second time generates the "Details" page with this Form).





As you can see, the form is now properly formated on phones.

Hope this information helps you (although a bit late), and please let us know if you have any other questions.

Best Regards,
Samuel Jesus

Hi Samuel

Thank you for your repliy. It does look better now. I have another question.

We would like the labels and input boxes to stack on top of eachother on the phone. Right now they are side by side as shown on your screen shot. To achieve that using the built in functionality we would have to wrap every label/input box with a column and set BreakAll. That's a lot of work if you have lots of controls.

We wrote some CSS to achieve what we want but we are worried that this may cause us issues later on when outsystems maybe changes the Class Name in the generated code.

Here is the css that stacks all labels and input boxes on top of eachother.

/*make controls 100% on phone so the controls are all on top of eachother*/

.phone [class*='ThemeGrid_Width'] {
display:block;
width:100% !important;}


/*remove the left margin so the controls are left aligned*/

.phone .ThemeGrid_MarginGutter{
    margin-left:0%;
}

Do you see any issues with this apporach. Is there a simpler way of doing it with what outsystems provides. e.g. a BreakAll for all controls inside a Form.

I wanted to include an image that show a Form without this CSS and with the CSS but i don't have a URL where i have my pictures. 

Thank you
Fabian

Hello Fabian,

You solution will solve your issue.
However, It is a bit extreme, because all containers with size defined directly on the platform (for example: fillparent, 3 col, etc) will have a width of 100%,

There is actually a better way to do it (although will have a bit more code):

• The Form has a class called form_left, that contains the CSS rules that make the labes appear on the left. Also, you have the option on the form to set the label to appear on top of the input. That will give you the class form_top.

• Since you just want that behaviour on phone, my suggestion is to actually override the form_left class with the css rules applied on the form_top:

This option, although has more code, it is only affecting the form, leaving you the option to size the remaining content of your page with the platform columns.

Please let me know if you have any questions.

Cheers,
Samuel Jesus