Good morning.
I would like to simply use an If with the condition: If the total width of my screen is less than 1024px, paint me one thing and if it is false, paint me another.
Is it possible to use this style condition in a simple If? Without using any CSS?
And if CSS were necessary. How would it be?
Thank you very much
Hello Mario,
If your question about making your web application responsive and you can open it on different devices (desktop, tablet or mobile) you can check following link about device detection and adaptive UI patterns:
https://success.outsystems.com/documentation/11/developing_an_application/design_ui/look_and_feel/responsive_ui/
If you want to know width of screen to implement some logic you will need to use Javascript code to retrieve screen width then use your If condition based on returned value from javascript
Mario,You can use the built in functions for device type if that is sufficient.
If you need exact size as mentioned without CSS you'll need to run some custom javascript on a previous screen and store the user's screen size, and use that information either from the database or a session variable or input variable to control the IF statement.Best,RAD Manage
Hello
You can change the screen css based on the resolution for that you can use Media Quarries
I am attaching you a link for the same -
https://www.outsystems.com/forums/discussion/43178/how-to-use-mobile-device-resolution-in-css/
https://www.w3schools.com/css/css3_mediaqueries.asp
You can also handle this with the use of Display on the device widget - check here for tutorial - https://success.outsystems.com/documentation/11/developing_an_application/design_ui/patterns/using_mobile_and_reactive_patterns/adaptive/display_on_device/
I hope this will help.Best RegardsTousif Khan
Hey @Mario Sepulveda
One thing you can do is get the VH and WH and store in in a local variable and use this dimension to set a condition. Eg If (wh <=1024,condition1, condition20
Please refer this doc to get hight:
https://www.outsystems.com/forums/discussion/54316/height-of-web-screen/#:~:text=if%20you%20set%20the%20height,height%20irrespective%20of%20screen%20size.&text=Babu%20Basha-,%24(document).,JavaScript%20to%20your%20screen%20action.
Thanks Shlok Agrawal