Customizing vertical and horizontal Scrollbars at the same time with css
-
Hello!
I have a widget inside of a QScrollArea and I want to customize the ScrollBars with css. When only one ScrollBar is enabled, the css works fine but when both are enabled, the sub-page and add-page controls lose their css. Anyone know why this is happening and how I can work around it? Any help would be much appreciated.
-
Can you show some code that gives you trouble?
I checked and it seems to work fine:@
scrollArea->setStyleSheet( "QScrollBar { border: none; }"
"QScrollBar::sub-page:horizontal { background-color: red; }"
"QScrollBar::add-page:horizontal { background-color: green; }"
"QScrollBar::sub-page:vertical { background-color: blue; }"
"QScrollBar::add-page:vertical { background-color: yellow; }"
);
@The result is:
!http://img845.imageshack.us/img845/448/scrollbars.jpg(scrollbars example)! -
when I set it to transparent it doesn't behave like this... It gives a grayish color like the normal color of a widget... Code is irrelevant because it works when only one of the scrollbars is visible...
@QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: transparent;
}QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: transparent;
}@ -
Ok, I get what you mean, transparency works a little different.
The add-page and sub-page become transparent, but they are "on top" of the QScrollBar, so it's default background is visible (gray). Also, the scrollbars are not "on top" of the scroll area content, they are beside it, so to get a common background for content and scrollbars you need to set it on the QScrollArea itself, and give the content transparent background.Example:
@
QScrollArea { background-color: red; }#scrollAreaWidgetContents { background-color: transparent; }
QScrollBar { background-color: transparent; }
QScrollBar::sub-page,
QScrollBar::add-page { background-color: transparent; }
@
gives
!http://img402.imageshack.us/img402/5166/scrollbars2.jpg(scrollbar example 2)!
