Transparent QWidget/QScrollArea background style setting has no effect
Solution 1
Can you try scrollArea.setStyleSheet("background-color:transparent;");
It works for me.
Solution 2
Use the stylesheet
QScrollArea { background: transparent; }
QScrollArea > QWidget > QWidget { background: transparent; }
QScrollArea > QWidget > QScrollBar { background: palette(base); }
To understand this lets asume a similar but simplyfied layout:
scrollarea QScrollArea
+ scrollareaContent QWidget
+ label QLabel
Interestingly there are two widgets with an non-transparent background. The first is the scrollarea itself (made transparent with the first line of the stylesheet).
The other one (which I didn't expect) is scrollareaContent which gets addressed with the second line. There the first QWidget is the private viewport of the QScrollArea which could not be accessed directly. The other one is the scrollareaContent. This approach should make all QScrollAreas transparent without affecting any of the other widgets.
UPDATE: I added a third line to the stylesheet which prevents the scrollbars from becoming transparent as they are also QWidgets two levels below QScrollArea.
Solution 3
Using the following stylesheets I was able to make the scroll area transparent, while keeping the default background color for scrollbars:
scrollArea.setStyleSheet("QScrollArea {background-color:transparent;}");
scrollAreaContents.setStyleSheet("background-color:transparent;");
Related videos on Youtube
Sebastian Roth
Welcome to my page. I'm a Solutions Engineer working for Snyk. Some projects I've been working on in the past months: Various iPhone & Android Projects at Nextbase, with a total install base of about 600k users. Get in touch for a comprehensive portfolio. Get in touch: Xing, Twitter, My Website
Updated on January 12, 2020Comments
-
Sebastian Roth over 4 years
This question relates to
- http://www.qtcentre.org/threads/18151-QScrollArea-misbehaving-background-style
- http://www.qtforum.org/article/34443/cannot-change-background-color-of-a-qscrollarea-with-setstylesheet.html
I'm asking in here because I believe the SO community might have a way to fix this behavior.
So I like to set the background color of a ScrollArea to either being transparent or to a custom background image as it will contain some banners. I got it running in the Qt Creator (Designer) already! :-):
But when deploying the app to the simulator it won't work, the are stays gray, dark gray:
Here is my layout tree:
And here is the stylesheet I'm using (attached & set to the MainWindow):
QMainWindow { background: transparent url(:/ui/designs/images_from_android/bg_plain_empty.png) top left; } QWidget#centralWidget { background-color: transparent; } QPushButton { color: red; border: 1px solid green; } QFrame#top_header { background: transparent url(:/ui/designs/images_from_android/bg_title_bar_landscape.png) top left repeat-x; } QWidget#top_banner_scroll1, QWidget#top_banner_scroll2 { background: transparent url(:/ui/designs/images_from_android/stripe_bg.png) top left repeat-x; }
This is quite puzzling. And as Qt Designer is showing me the proper design...
-
Sebastian Mach about 13 yearsthough that will make all children transparent that have no specialized stylesheet (thoughthough one could pack the children in some other container which has the right stylesheets)
-
Lwin Htoo Ko about 13 yearsYes, childern will inherit the parent's stylesheet if they don't have their own stylesheet.
-
Valentin H over 10 years+1 Thanks! the syntax QScrollArea > QWidget > QWidget helped me setting also background-color!
-
David Young over 8 yearsJohannes answer works correctly without affecting all children within the scroll area.
-
isanae almost 8 yearsThis breaks the scrollbar's colors. Jadamec's answer below seems to be correct.
-
isanae over 7 yearsThis makes the context menus black on the widget. The CSS on the contents widget (the second line) should be constrained to that widget only by using its ID (from the
objectName
property). If the widget is namedscrollAreaContents
, then it should be#scrollAreaContents { background-color:transparent; }
. -
kambala over 6 yearsIn Qt 5.6.2 I managed to make everything but scrollbars transparent with the following (order matters!):
setStyleSheet("QScrollArea > QWidget > QScrollBar { background: palette(base); }");
_graphicsView->setStyleSheet("background: transparent");
-
bariod about 5 yearswhat's
_graphicsView
? @kambala -
bariod about 5 years@isanae Apparently, by setting the background of the scrollbar to any integer, it will display the default one again. (
QScrollArea > QWidget > QScrollBar { background: <any integer>; }
) -
kambala about 5 years@bariod your scrollable widget. In my case it was
QGraphicsView
.