I have developed a Reactive web application, which has containers, table, buttons , cards etc in many blocks and implemented in screens. In every zoom above certain range the buttons are overflowing outside the container and is not responsive while viewing. For instance , If I zoom the browser tab till 125% or above, the buttons present in blocks like popup are overflowing outside the containers present on the screen. We have used "px" for denoting heights and widths values in our entire application. It would be difficult to modify all px values at this time . Can someone help us out to resolve this issue.
Hi @Ajay Saminathan ,
Thanks,
Dhanasingh Dennison
Hi @Ajay Saminathan, I will suggest you use the Columns UI provided by OutSystems which will help you to make your UI responsive.https://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_mobile_and_reactive_patterns/adaptive/columns/Thanks
Hi @Ajay Saminathan
You can use Media Queries to override the fixed pixel values at certain viewport sizes (or zoom levels) without rewriting all existing CSS.
Duraikannan
you can watch and learn from
https://www.outsystems.com/videos/responsive-web-applications-nextstep-2014/
Hey @Ajay Saminathan ,
Regarding your popup issue, you might want to check out this post: Link .
Hi @Ajay Saminathan,
Every screen design/layout is different, & if you are not aware of CSS and UI best practices it's little tricky to create fully responsive design for custom screens.
If it's possible, can you please share a demo application with similar design having dummy data, you can bootstrap the data, then it would be much easier to understand the issue & provide the right resolution for your problem.
Regards,
Manish Jawla
I will attach a sample OAP application with two screens , In Test1 screen, I have applied some style classes whereas in Test2 screen, I haven't applied any CSS styles. You can find the difference what we are facing by zooming these two screens in browser.
Hi Ajay,
* Don't use a fixed width. If the scenario requires a fixed width, use min-width and max-width.
* Use the OutSystems Column widget, which has properties for tablet and phone. You need to break the column there so that the application is responsive.
* Check overflow properties – Set overflow: hidden; or auto;
* Use media queries (if the above issue can't be fixed, use this).