I used a tab navigation with 2 contents, one with a single page content and the other tab has a list of tables that needs to be scrolled horizontally when viewed in mobile because the table has many columns, and it overflows outside the screen in mobile.
Our assumption is that the swipe actions from the tab widget prevents the horizontal scroll that is needed for the list of tables. Any idea how to solve this problem?
Hi @Alec Manabat
I guess you could play with css to achieve that. You can use the overflow-x property to add a scroll bar in your content. You can create a class and set the overflow x to auto. So, a scrolling mechanism will be provided for overflowing columns:
Tablecontent { overflow-x: auto;}
You can have a look at this link for a demo:
https://www.w3schools.com/cssref/css3_pr_overflow-x.php
Regards,
Tami
This was the first thing I've tried, and it doesn't work. Thanks for your reply though.
It might be you didn’t apply to the right div/level. Also, you have to check if your css it’s not been overridden. In that case, you have to add the !important as suggested below.
Hi Alec
How about use !important ?
ex)Tablecontent { overflow-x: scroll !important;
}
If you share screenshot with developer tool screen being selected table tag, it will be more helpful for us
In general, using !important points at flaws in your CSS classes or other CSS problems, so it's not to be used lightely (and definitly not as a work-around fix), as it can lead to all kinds of other problems.
Hello, Mr. Killian, I agree.
Lastly, Using "!Important points" is not a good idea. Because as you said, there are unexpected problems.But I don't think the CSS problem can be solved at once. Finding an element is the first step. From this perspective, "!Important points" help you find the elements you want to apply CSS effects (such as overflow: scrolling).When you find the elements, You should use a high specificity calculator instead of "!Important points".
Please let us know how to help Alec. Thanks.
Hi Alec,
You can leverage the Scrollable Area from OutSystemsUI module.
Inside toolbox, click search in other modules, select the Scrollable Area widget from OutSystemsUI module and click add dependency.
Also you can choose the orientation of the Scrollable from the properties.
I hope this solves your problem, also Check this link for more information.
Saad Ahmed