Styling scrollbar with CSS
Solved
General and Desktop
-
I'm trying to give all the app's scrollbars a specific design using CSS. I have achieved everything as desired so far; but I still haven't figured out how to make 'handle' the same width as the top and bottom scroll buttons. How do you do that?
CSS code (format string literal in Python / PySide2):
scrollbar_design = f""" QScrollBar {{ background: #D3D3D3; border: none; margin: 0; padding: 0; width: 30px; }} QScrollBar:groove {{ border-radius: 5px; background: gray; margin: 25px 0; width: 30px; }} QScrollBar:handle {{ border: none; background: #D3D3D3; margin: 25px 0; min-height: 30px; min-width: 30px; }} QScrollBar:sub-line {{ background: #F29100; border: none; height: 30px; padding: 0; width: 30px; }} /* QScrollBar:sub-line:vertical {{ border-image: url({window.catalog.icon.control["up.png"]}); }} */ QScrollBar:add-line {{ background: #F29100; border: none; height: 30px; padding: 0; width: 30px; }} /* QScrollBar:add-line:vertical {{ border-image: url({window.catalog.icon.control["expand.png"]}); }} */ """
I commented out the code for the arrow images and only included it for the sake of completeness.
The first picture shows the desired design, the bottom shows my actual implementation.
-
QScrollBar::groove and QScrollBar::handle both have 25px horizontal padding. You don't want that if you're trying to make your scroll bar flush with the scroll buttons.