Hi everyone
I'm new to reactive.
I want to know how to implement adaptive table records in reactive.
This is my table with the default CSS.
But when the screen shrinks, the table is not fully displayed, and when it gets smaller again, the table is not visible
Any suggestion is appreciated.
Kind Regards
Hello ,
As far as I understood your question to ensure that the table is fully displayed even on smaller screens, apply responsive design techniques. Below I have provided few suggestions:
1. Use containers and grids: Wrap the Table Records widget inside a container . Set the container properties to adjust their width and responsiveness based on the screen size.
2. Utilize CSS classes: Apply custom CSS classes to the Table Records widget or its parent elements to control its width, overflow, and visibility based on the screen size. Use media queries in CSS to define different styles for different screen sizes.
3. Enable horizontal scrolling: If the table has many columns that cannot fit within the available width,then i would Highly recommend you to consider enabling horizontal scrolling for the table. This allows users to scroll horizontally to view the complete table content.
(css : width: 100%; overflow-x: auto; )
I hope this helps you.
Hi @YITONG LYU ,
As @Ayush Tyagi said, Place the table inside the container and set it's overflow-x property to auto or "Scroll" (Setting to scroll can be preferred) and mention "vh" property to the respective height and most importantly put everything inside the media query with your required resolution.
@media query (){.example { overflow-x: scroll; }}
replace the respective values over there. Hope it helps.
Regards,Nandhakumar S.
Hello
The table is used for web applications if you want to make it responsive, you can use List
Or you can use responsive Widgets where you can check the behavior of the window and based on the resolution you can change the table to List.
I am attaching some examples for you that have already been posted by another Community member on a similar question.
https://www.outsystems.com/forums/discussion/43011/horizontal-scroll-issue/https://www.outsystems.com/forums/discussion/52279/display-a-table-of-records-in-mobile-app/https://www.outsystems.com/forums/discussion/74753/outsystems-ui-disable-reactive-web-table-widget-responsive-behaviour-in-ipad-pr/ThanksTousif Khan