11
Views
4
Comments
Solved
Adaptive columns fails for web and mobile

Hi All

I am creating a reactive web application for both web and mobile. I have used adaptive columns which should be responsive for both web and mobile. But In my tablet view or web view I can see only the mobile design. How to overcome this issue? Can we apply any media queries? 

Solution

Hi kavya anbazagan ,

You can use the properties of adaptive column to break the content as per device and requirement.



Please refer below link for more detail:

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Structure/Columns


Hope this helps you..!


Regards,

LK


Rank: #171

Hi Kavya,

You can try use DisplayOnDevice:

so for each type of device make a list and specific columns.


Other solution is get the device type with this options:


Regards.

Rank: #3025

Agno Silveira wrote:

Hi Kavya,

You can try use DisplayOnDevice:

so for each type of device make a list and specific columns.


Other solution is get the device type with this options:


Regards.

 

 Thanks Agno . But I have multiple buttons and containers to be placed in adaptive columns. I want to minimize repetition of values as much as possible.

Rank: #171

kavya anbazagan wrote:

Hi All

I am creating a reactive web application for both web and mobile. I have used adaptive columns which should be responsive for both web and mobile. But In my tablet view or web view I can see only the mobile design. How to overcome this issue? Can we apply any media queries? 

 Yes, you can apply media queries CSS. Example:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.outsystems.com/learn/lesson/937/additional-concepts


Regards.

 

Solution

Hi kavya anbazagan ,

You can use the properties of adaptive column to break the content as per device and requirement.



Please refer below link for more detail:

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Structure/Columns


Hope this helps you..!


Regards,

LK