Text box scroll bar width (how to adjust it?)

[EVerheggen]

The "Draw Scroll Area" has settings to adjust the scrollbar. But I can't find a way to adjust the scrollbar created in a Text Box. Please advise. (Google and a search in this forum does not bring me any further...)

[Tony]

Hi,

Pop this in the Embedded Stylesheet and adjust the values to suit.

.ggskin_text>div::-webkit-scrollbar {
width: 8px;
}
.ggskin_text>div::-webkit-scrollbar-track {
background: #525e24;
}
.ggskin_text>div::-webkit-scrollbar-thumb {
background: #a4c799;
}
.ggskin_text>div {
scrollbar-width: thin;
}

Tony

[EVerheggen]

Thank you Tony for this code.

Changing the colors works fine.

But the width does not change. I replaced the 8px with larger numbers, but no difference.

I replaced "thin" with "thick" and "15px". In both cases no difference.

I saved, restarted etc. Only did not upload the project online to see if it will become visible.

[Hopki]

Hi,
Have a look at the style sheet in the project:

width.zip

(42.78 KiB) Downloaded 89 times

Regards,

[EVerheggen]

I tried this, but also no result.

Is there a code that I can add to the CSS Styles of the textbox? I guess that would be the most direct solution. (I tried all kinds of variations of the code from the previous two answers, but no result)

Might the problem be caused by the fact that I am using CSS for positioning the textbox?

Or maybe because I am having several Custom Properties?

I send a screenshot and my project files to support.

[Tony]

Hi,

FYI, if you just want to change the text box scroller then use this...

.ggskin_text>div::-webkit-scrollbar {
width: 8px;
}
.ggskin_text>div::-webkit-scrollbar-track {
background: #525e24;
}
.ggskin_text>div::-webkit-scrollbar-thumb {
background: #a4c799;
}

The "thin" wasn't supposed to be in there.

Using just this will give you this result. Only the text box has changed the scrollbars in the External Image are the standard version.

testing_update5.jpg (226.51 KiB) Viewed 2341 times

If you want to change all the scrollers regardless of the element then use the version that Hopki posted.

.ggskin { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;}
.ggskin ::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,1);}
.ggskin ::-webkit-scrollbar {width: 18px;}

This will give you the result

testing_update6.jpg (231.77 KiB) Viewed 2341 times

cheers,

Tony

[EVerheggen]

Thank you for the reply Tony,

Unfortunately both solutions don't work.
I can change the colors with both codes, but the width does not change.

With the second block of code, the color of the one scroll area that is in my skin does not change (but that is not a problem, because those settings are easy to make in the scroll area itself).

While you wrote your last message, I sent an email to support with my files and a screenshot. Hopefully that will help to find the cause of this issue.

Best regards,

Erik

[Hopki]

Hi Erik,
In your skin, you have a code element that has a CSS Style sheet as well as the skin having a style sheet.
As you can probably guess you have one or the other but not both

Screenshot 2023-04-10 at 17.37.49.png (184.15 KiB) Viewed 2320 times

The skin looks at the code element first and so uses the 5px width, you can change this and it will affect the scroll width.
The components were given their own CSS in a code element, if you do not want to use this, just remove the code element.
Regards,

[EVerheggen]

Thank you so much Martin! Problem solved.

Best regards,

Erik