Text box scroll bar width (how to adjust it?)
- EVerheggen
- Posts: 65
- Joined: Wed Feb 05, 2020 12:16 pm
- Location: Netherlands
- Contact:
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...)
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
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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
- EVerheggen
- Posts: 65
- Joined: Wed Feb 05, 2020 12:16 pm
- Location: Netherlands
- Contact:
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.
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
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi,
Have a look at the style sheet in the project:
Regards,
Have a look at the style sheet in the project:
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
- EVerheggen
- Posts: 65
- Joined: Wed Feb 05, 2020 12:16 pm
- Location: Netherlands
- Contact:
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.
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.
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.
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
cheers,
Tony
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.
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
cheers,
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
- EVerheggen
- Posts: 65
- Joined: Wed Feb 05, 2020 12:16 pm
- Location: Netherlands
- Contact:
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
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
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
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
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,
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
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,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
- EVerheggen
- Posts: 65
- Joined: Wed Feb 05, 2020 12:16 pm
- Location: Netherlands
- Contact:
Thank you so much Martin! Problem solved.
Best regards,
Erik
Best regards,
Erik