Hello,
For my mobile application I would like to have horizontal scrolling on a component which looks like this:
I saw that there used to be a Horizontal scrolling webblock, but this has the deprecated in front of the webblock and also this webblock doesn't work. I searched the forum and found other people with the same question, but the solutions proposed there, are not working for me. (I have tried: https://www.outsystems.com/forums/discussion/44740/the-horizontal-scroll-pattern-is-not-working-in-outsystems-11/ and https://www.outsystems.com/forums/discussion/43011/horizontal-scroll-issue/)
Can anyone help me out getting this to work in my mobile application?
Kind regards,
Tyler
Now it is using data from an entity on a list, and scrolling horizontally :)
https://marcio-carvalho4.outsystemscloud.com/horizontalscroll/Piechartwithlist?_ts=637563252061279953
Regards,
Márcio C.
Hello @Tyler Cools, did you tried this?
.horizontal-scroll { overflow-x: auto; width: 100%; } .list.list-group { overflow: visible; }
With the horizontal-scroll i think on the container where you have those buttons
Márcio
Hi @Marcio Carvalho,
Thanks for your response. I have tried to implement this, but I can't get this to work. Can you maybe provide a sample oml where horizontal scrolling is working?
Thanks!
Yes mate, I will try
You need to add the horizontal scroll class.
You don't need that CSS, you just need to add this class "horizontal-scroll" as i did :)
https://marcio-carvalho4.outsystemscloud.com/horizontalscroll/Piechartwithlist?
Is this the horizontal scroll you created or the horizontal scroll that is in the deprecated OutSystems UI module? They are both not working in my module...
This is from OutSystems UI. Can you provide your oml? or a link for your screen, I dunno
Thanks
Ps: If you have inside container buttons, add these 2 classes, "button-group horizontal-scroll" on the container Style Classes
This is what I get, the overflow part works, but it is not scrollable. This is by using the horizontal-scroll from OutSystemsUI in combination with the horizontal scroll that you provided.
(in the inspect elements)
in Service Studio your version in the style sheet
the OutSystems UI horizontal scroll class
What is happening I think is you are on the preview
In this preview, I cannot too scroll but if you go to the URL and take this part of the URL
It will show you this, what you have to do next is
Click in here to make the browser as mobile.
And then I think you will see the content scrolling.
Remember, you don't need to add this:
You just need to add the "button-group horizontal-scroll" to the style classes of the container that has your buttons!!
Hi Marcio,
I got the screen from your oml working in my application, however, the amount of buttons is dynamic and therefore I would like to use the list widget with list items, I can't get the horizontal scroll to work yet on the list. Do you also have a solution for that?
Hello, why do you want a list? what will be the source on the list?
The source will be an aggregate, I want to use it for filter options, so you should be able to select one or multiple you want to use as a filter, and this list is dynamic
Those options are data from the entity, inside of buttons, right?
Yes correct!
Thanks for the oml, I got it to work!
Thanks for your help!