Customize the Scrollbar
Application Type
Traditional Web

Hi, I want to costumize my scrollbar for the table in Traditional web using CSS. But why does it appears the normal version of scrollbar? Is my code wrong or what? Sorry I'm newbie 

mvp_badge
MVP
Solution

Hi Jason,

You are right, I also had the same observation i.e. the scrollbar on the outer container will work, instead of applying the same css rules on Table Records widget.

See this sample app TableScrollBarDemo

Refer to the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam 

TWALabCustomTableScrollbar.oml

Hi Jason,

Did you add your scrollist class on container?

You need to add that class on table like this,

Please try in this way,

Hope this will help,

Regards,

Komal

Hi, I tried to delete the class ScrollList and TableRecords in Container and put them in my table class 
But, the result is that Scrollbar not appear


This is the screenshot if I put scrolllist class in Container(just normal scrollbar not costumized)

mvp_badge
MVP
Solution

Hi Jason,

You are right, I also had the same observation i.e. the scrollbar on the outer container will work, instead of applying the same css rules on Table Records widget.

See this sample app TableScrollBarDemo

Refer to the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam 

TWALabCustomTableScrollbar.oml

Thankyou so much Benjith, it seems that I got wrong on the CSS style scrolllist code.

This works for me

mvp_badge
MVP

You're most welcome, Jason :)

Glad to help you :)


Kind regards,

Benjith Sam

Do you have a picture of the scrollbar you have now and the one you want to have?

https://www.outsystems.com/forums/discussion/47029/styling-scrollbar/

Yeah I tried to copy paste the code in here
The scrollbar should be like that. But I already tried to costumize the color and it didnt changed. I think I have wrong logic or what.

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