64
Views
4
Comments
Solved
How to adjust the web, tablet and mobile visualization in the Reactive module?
Question

How to adjust the visualization of the web, tablet and mobile in the Reactive module? I need to create a configuration or something that makes it possible to adjust the content without changing the display of the menu and screen information, just adjust to the size of the Tablet or mobile. 


I wanted it to be displayed on Tablet and Mobile like this:

(Web)


(Tablet)


(Mobile)

WebTabletMobile.png

Rank: #335
Solution

Isabella Torres wrote:


How to adjust the visualization of the web, tablet and mobile in the Reactive module? I need to create a configuration or something that makes it possible to adjust the content without changing the display of the menu and screen information, just adjust to the size of the Tablet or mobile. 


I wanted it to be displayed on Tablet and Mobile like this:

(Web)


(Tablet)



(Mobile)


 

 Hi,

You can use column pattern for this which comes for adaptive behaviour of your page in this you can define the look for different devices.

Please check the below link under Adaptive 

https://www.outsystems.com/OutSystemsUIWebsite/PatternOverview

Hope this helps 


Thanks

AD


mvp_badge
MVP
Rank: #19

Hi,

The menu did not disappear on tablet and mobile. It is moved to the left as a hamburger menu, if you click on the icon with the 3 horizontal lines the menu will appear.

The OutSystems ui styling is developed to be responsive and as such it is a best practise to use a hamburger menu if there is limited horizontal space on a device.

Regarding content that moves out of place, that occurs most when not properly using the OutSystems ui classes and adding other css styling.

OutSystems UI also has functions available that you can use to check if the user is using a pc, tablet or mobile device slowing to you to customize the appearance of your application based on the used form factor.

If you search OutSystems.com/learn you will find some training material that can help you.

Regards,

Daniel


Rank: #335
Solution

Isabella Torres wrote:


How to adjust the visualization of the web, tablet and mobile in the Reactive module? I need to create a configuration or something that makes it possible to adjust the content without changing the display of the menu and screen information, just adjust to the size of the Tablet or mobile. 


I wanted it to be displayed on Tablet and Mobile like this:

(Web)


(Tablet)



(Mobile)


 

 Hi,

You can use column pattern for this which comes for adaptive behaviour of your page in this you can define the look for different devices.

Please check the below link under Adaptive 

https://www.outsystems.com/OutSystemsUIWebsite/PatternOverview

Hope this helps 


Thanks

AD