[Silk UI Web ] Responsive form fields and containers

[Silk UI Web ] Responsive form fields and containers

Forge Component
Published on 2016-11-11 by OutSystems Labs
49 votes
Published on 2016-11-11 by OutSystems Labs

Hi. I'm new here in the Outsystems community, so greetings and thanks in advance for the support.


I'm trying to create a responsive layout based in the default containers generated by the scaffolding systems and found a strange behaviour in the Silk UI themes (Liverpool, Vanilla, etc...). When I resize the screen to trigger the smart phone responsive layout the containers won't break as in “London Theme”.


Take a look at the images below or follow the links. Try to resize the window in both WebScreens to see the behaviour.


Shouldn’t Silk UI behave like London?








Yes, it got me ticked as well.

Hello Fernando,
First of all, welcome to the Community.
Silk UI has a different approach to responsive. Silk UI always divide the available space in 12 columns. So, if you use the platform columns to define the width of an element, when you resize the screen, the element will adjust the width taking in consideration the new size of the parent container and the screen.

In order to break elements on specific devices, Silk has some structure patterns, that allow the user to select (inside the development environment) the behaviour they want on a specific device type.
On the Silk UI website you can find more information about the Silk UI Server Side Responsive approach. Also on the website there are some video tutorials that can help you getting started with the framework, and there is a specific video just about Responsive in Silk UI.

Best regards,
Samuel Jesus
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'] {
width:100% !important;}

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

.phone .ThemeGrid_MarginGutter{

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
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.

Samuel Jesus