Hi, Friend.

To implement a horizontal scroll bar in an OutSystems application, you can consider the following options:

Horizontal Bar Multiple Parts component : The "Horizontal Bar Multiple Parts" component available in the OutSystems Forge can be a suitable solution for creating a horizontal scroll bar with multiple parts. You can explore and use this component to meet your horizontal scrolling needs.

Table With Horizontal Scroll component : Another option is the "Table With Horizontal Scroll" component, also available in OutSystems Forge. This component is especially useful if you need a table with horizontal scrolling capabilities.

In addition, you can consult the official OutSystems documentation on "Scrollable Area" for detailed guidance on how to implement scrollable areas in your applications.

I think this is what you want, let me know if it helps you :)

.ListScroll::-webkit-scrollbar {

  width: 10px;  

}

/* Track */

.ListScroll::-webkit-scrollbar-track {

  background: #f1f1f1;  border-radius: 20px;

}

/* Handle */

.ListScroll::-webkit-scrollbar-thumb {

  background: #888;  border-radius: 20px;

}

/* Handle on hover */

.ListScroll::-webkit-scrollbar-thumb:hover {

  background: #555;  border-radius: 20px;

}

And put the overflow-y as  auto from the .ListScroll class

PS: the styling that I gave to the scroll is just an example, you can do as you want! :)

You can also look at w3 schools on how to do it :)
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Kind Regards,

Márcio

Hello Luiz Lima,

Checked this link if you want custom scrollbar there and below css also there

https://codepen.io/devstreak/pen/dMYgeO

https://codepen.io/thetallweeks/pen/DJjbRK

.ListScroll {

    height: 400px;   

    overflow-y: auto;

}

.ListScroll::-webkit-scrollbar-track

{

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    border-radius: 10px;

    background-color: #F5F5F5;

}

.ListScroll::-webkit-scrollbar

{

    width: 12px;

    background-color: #F5F5F5;

}

.ListScroll::-webkit-scrollbar-thumb

{

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

    background-color: #D62929;

}

Thanks,

Regards,

Rupesh Patil

Hi , Please try the below CSS style.

/* width */

::-webkit-scrollbar {

  width: 20px;

}

/* Track */

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px grey; 

  border-radius: 10px;

}

/* Handle */

::-webkit-scrollbar-thumb {

  background: red; 

  border-radius: 10px;

}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #b30000; 

}

Regards,

Thank you for the post @Luiz Lima &  Thanks for the solution! @Márcio Carvalho