I have a Qt application that, among many other widget types, uses a QTabWidget. I'm having difficulty styling the background color for this object.
I've tried some of the following lines, which I found from other forum posts, in my stylesheet with no effect on the program
QTabWidget { background-color: black; }
QTabWidget::pane { background-color: black; }
QTabWidget#tabWidget { background-color: black; }
QTabWidget#tabWidget::pane { background-color: black; }
If I use QWidget { background-color: black; }, then yes my color is properly changed, but then all of the other widgets in my program are changed as well... so this isn't what I'm looking for...
I've also tried it in code with ui->tabWidget->setStyleSheet("background-color: black"); But this too is undesirable because it changes the background color of all of its children widgets.
Does anyone have any other ideas on how to style a QTabWidgets contents background area?
About a year late but I recently ran into the same problem and got it working.
First of all QTabWidget has a child QWidget for every tab you make. That is the area that you put your other widgets into, and that is what you want to set the background color of.
Set the style-sheet by doing this.
1)Determine the name of your tab widgets from the design object window top right, they should match the currentTabName that you set when creating your tab.
2)Realize this is a QWidget not a QTabWidget this is why QTabWidget { background-color: black; } does not work.
3)Realize that by specifying the object in the style-sheet with the '#' the child object will not inherit the style-sheet.
For me I specified my style-sheet as such, repeating for each tab object name that I had:
#objectName {background-color: rgb(240,240,240);}
This provided me with the exact behavior I needed. In my case I wanted to get the natural gray background onto my Tab pages but not override the child components on the tab pages.
I hope this helps someone in the future...
In Qt (for a Maya plugin), I have a QSplitter containing 2 QGraphicsViews.
One of these QGraphicsViews contains some QLineEdits.Whenever I click on one of these QLineEdits, it gets a blue border (focus), but the QGraphicsView gets a blue border too. How to avoid the QGraphicsView to get a blue border ?
You can try setting style sheet eg:
QGraphicsView:focus {
border: none;
outline: none;
}
How to change the style sheet of splitter/handle beside QDockWidget when it is added to DockWidgetArea. There is one main movable handle and multiple handles between each dockwidgets on that side. I would like to change at least bg colour and border of the handle and hover colour.
It would help if I know what kind of object it is or to get some pointer to the handle to setStyleSheet on it.
Ok I found it after some digging inside source code. Finally the answer was so simple and was screaming from the documentation of style sheet:
Note: Use QMainWindow::separator to style the resize handle.
Ok so the code is simple:
QMainWindow::separator
{
background-color: green;
width: 4px;
border: none;
}
In my app, i have a section that is top widget, the color of the top widget is gray, and i've been put severl widget on top widget, like QComboBox, QLineEdit and 2 QButton, but i have a problem when i right click on QLineEdit as you seen in below picture, the color of default context of window is gray, or when i open the QComboBox the color of background is gray. I'll set the background color of two these widget to white but doesn't work. So, how can i fix this?
Sample for better understand:
http://0000.4.img98.net/out.php/i52512_problem.png
Please help me
The style sheet propagates to all the child widgets, so you have to limit their range by using the right selectors. Since the context menu is a child of the QLineEdit it is also affected.
// What you have probably done:
myLineEdit->setStyleSheet("background-color: gray");
// What you should have done:
myLineEdit->setStyleSheet("QLineEdit { background-color: gray }");
// What you should do if there might be child widgets of the same type
// but for which you don't want the style to apply:
myLineEdit->setObjectName("myLineEdit");
myLineEdit->setStyleSheet("QLineEdit#myLineEdit { background-color: gray }");
See "The Style Sheet Syntax - Selector Types" for details.
I have a problem with QTabBar/QTabWidget. This is what my program looks like at the moment, using QTabBar:
As you can see, there is an unsightly line between the QTabBar and the QScrollArea underneath it. This line is part of the frame of the QScrollArea, which I can't simply get rid of, because it is required on the other three sides. I realise I could use QTabWidget, but then I would have to create a widget for each tab, which is not feasible here: the contents of the QScrollArea change according to the selected tab, but there is only one QScrollArea widget. (Duplicating it each time a new tab is created would cause its own problems.)
So does anybody know a way to either:
(i) tell the QScrollArea to draw a frame without the top line; or
(ii) use the same widget for each tab in a QTabWidget?
Update 3 For another approach, see my answer below.
Update 1 I have implemented zvezdi's suggestion, and the unsightly line has disappeared:
This is an improvement. But it's not right. Look at the gaps between the scroll bars and the border. On the right, it's two pixels instead of one; on the bottom, it's three pixels. And the gap on the right between the QScrollArea border and the mainWidget border is one pixel too big. This is due to QTabWidget's border style, which I am losing my sanity trying to change. If I say:
MyTabWidget -> setStyleSheet ("QTabWidget::pane { margin: 0px,0px,0px,0px }") ;
then the margins seem to be right, but the borders disappear:
If I say:
MyTabWidget -> setStyleSheet ("QTabWidget::pane { "
" margin: 0px,0px,0px,0px;"
" border: 1px solid darkgray;"
"}") ;
then I'm almost back to where I started:
If I try to remedy this with:
ApplicationTabWidget -> setStyleSheet ("QTabWidget::pane { "
" margin: 0px,0px,0px,0px;"
" border: 1px solid darkgray;"
" border-top: 0px;"
"}") ;
then again I am mocked for my pains:
Update 2 If I forget setStyleSheet and just turn documentMode on, this is what I get:
Please somebody, tell me I'm being stupid, and there's a perfectly simple solution to all this.
You said "the contents of the QScrollArea change according to the selected tab" well if I assume that this is not true, and what you mean is that the content of the widget that is inside the scroll area changes, then you can try this:
Make as many QScrollArea objects as many tabs you need in your QTabWidget, but only one, for example QTextEdit, which you will show in every scroll area, and which content will change on tab change (takeWidget() from the old tab's QScrollArea & setWidget() on the new tab's QScrollArea)
I don't know how you've designed your code, but to try my suggestion your code should be designed around the widget inside QScrollArea, rather than the QScrollArea itself.
Unless I misunderstand, if you turn off the QScrollArea's border by setting the frameShape to NoFrame, the tab widget still has its frame lines on the sides and the bottom where you want them.
I have tried another approach: Use QTabBar, as in the first screenshot, and then change the style for MyScrollArea (obvious, in retrospect):
MyScrollArea -> setStyleSheet ("QScrollArea {"
"border: 1px solid #898C95;"
"border-top: 0px;"
" }") ;
This is the result:
Almost right! There are three problems:
- the little square at the intersection of the two scroll bars is missing its bottom border (but it gets drawn if I click on the scroll bars, or resize the window, or the main window loses focus);
- the colur #898C95 is hard-coded, so it won't be right if the user changes the style. But if I leave out the border style, then the whole border is painted white. Is there a way to query the current border colour of a style?
- most seriously, the background colour of the breakpoint widget on the left-hand side is not white any more.
But I think I've wasted enough time on this! I will stick with this solution unless anybody can suggest something else to try.