Horizontal scroll Mobile application
Question
Application Type
Mobile

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

horizontalscroll.oml

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

Regards,

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!

Regards,

Tyler

Yes mate, I will try

Regards,

Márcio

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?

horizontalscroll.oml

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:

.horizontal-scroll {
    overflow-x: auto;
    width: 100%;
}
.list.list-group {
   
    overflow: visible;
}

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?

Kind regards,

Tyler

Hello, why do you want a list? what will be the source on the list?

Regards,

Márcio C.

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?

horizontalscroll.oml

Thanks for the oml, I got it to work! 

Thanks for your help!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.