Hi,I am trying to display a container in my application which has 7 containers inside it of varying width and heights, 6 containers are always visible in it and one is made visible on the click of a button outside the container. Now as outsystems gives only 12 columns in width i thought of displaying the width as 12/7=1.71 col but it won't account for the one hidden container. Also when i try to enter width as 1.71 column it displays it as 1 col only ,i also added the "overflow-x:scroll" property to my container but it isn't showing a horizontal scrollbar and gives a vertical scroll bar instead. I tried to fix my height of all containers and width as auto so that they scroll horizontally but instead they stack in two lines one above the other. How should i go ahead with the design of such a component
HelloYou Can add the horizontal scroll to it just following the steps:
There are multiple post related to this you can have a look:
I hope this will help you.
Best RegardsTousif Khan
Hi, i already have a parent container which contains all the containers in question, i applied the style properties but it is still giving me vertical scroll
So have you wrapped all the columns in a Row, and use the CSS like and make sure to make overflow-y to hidden/*The outside container the parent*/.scrolling-wrapper { overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}/*Inner Containers */ .card { display: inline-block; }You can refer here for the samehttps://www.geeksforgeeks.org/make-a-div-horizontally-scrollable-using-css/
https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6
Thanks
Hi @SS27,
Instead of using col you can try to set width in percentage it more flexible for your use case.For horizontal scrollbar try to give some fix width with overflow-x: scroll over parent container.RegardsKrishnanand Pathak
Hi i have tried using that to the parent container but i don't know why it is always giving me vertical scroll
Ok, then try ScrollableArea widget of OutSystemsUI as suggested by Gitansh.
I have implemented for you.
Sharing the oml for reference.RegardsKrishnanand Pathak
Hi @SS27, you can use ScrollableArea widget for OutSystemsUI.
ThanksGitansh Anand
Hi this is not present in the dependencies you have shown , although there is a horizontal scroll present which i am clicking apply on but how do i use it in my parent container?
Hi, It should be there; you might not be using the most recent version of OutSystemsUI.Since you can see the HorizontalScroll widget, you can use that. Just move everything from your parent container into the content placeholder in HorizontalScroll.
There is a pattern Outsystems UI called scrollable area. Check the link below
https://success.outsystems.com/documentation/11/developing_an_application/design_ui/patterns/using_mobile_and_reactive_patterns/interaction/scrollable_area/