I have a number of QToolBar's in Qt::TopToolBarArea of my QMainWindow. I want to remove the left and right borders from the ones which are not on the edges. However, when try the following code, it ends up erasing ALL of the borders on the QToolBar:
toolBar2->setStyleSheet("QToolBar { border-left-style: none; border-right-style: none; }");
I want this to appear as one continuous tool bar, with no borders between them. What is the proper way to achieve this?
You're right, styling one or more of the borders (including removing it) ends up removing the rest. This is because style sheets and Qt Styles don't mix very well, and the Qt Style usually loses.
What you can do is bring back the borders you do want to see. This example specifies how the top and bottom borders should appear, which in turn removes the left and right boders:
toolBar2->setStyleSheet("QToolBar {border-bottom: 2px solid black; border-top: 2px solid black;}");
Related
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 do I get rid of grey area as seen in the image below. It seems like if the table does not fill the entire space, the grey color just extends until the end.
I coded something similar to this image in C++.
It's not just grey color, it's a vertical header. As I see it, your options are:
Get rid of the header in Designer and create your own column with numbers, not editable, of course
Use custom stylesheet for QHeaderView, like (example, don't know your preffered colors)
QHeaderView::section
{
background-color: transparent;
color: black;
font: 10pt "MS Shell Dlg 2";
}
It works with QTableView.
UPD: Try the following: set the stylesheet for QHeaderView AND it's sections if needed, like
QHeaderView
{
background-color: white;
}
This will paint your header white, no grey, like you wanted. Then you can improve the stylesheet, styling sections (probably, you'll like proper borders and all, so don't use "border: 1px solid balck", play with border-top and/or border-bottom, otherwise sections will get ugly double inner borders).
After that you can consider styling only one header or both, further improve styleshhet, but the point remains that QHeaderView and it's sections can be styled independently
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;
}
I have a QSplitter and two widgets on either side, but I want to be able to have a margin, so that there is a clear transition between the two widgets. I looked in QSplitter and QSplitterHandle but dont see any explicit way of doing this.
How do I add a divider between the two widgets?
Style sheets are a powerful mechanism for changing the appearance of any widget in Qt.
See here for a quick tutorial, and here for a reference guide. Style sheets can be assigned using an editor in the Designer, or passed as a string using setStylesheet(QString). It is certainly easier using the Designer because then you can see what your widget will look like before running it.
Now, for your specific problem. A QSplitter is essentially a QFrame. But it also includes a handle - as you know. So typically that is what is usually styled.
So, for example you can do this:
QSplitter::handle {
image: url(:/images/splitter.png);
}
Which provides an image for the splitter handle. This is a bit similar to what is done under Motif, where there is a little rectangular handle always shown that the user can click on to move the splitter.
With a little experimentation you can create a cool separation line for your handle.
QSplitter::handle {
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
stop:0 rgba(255, 255, 255, 0),
stop:0.407273 rgba(200, 200, 200, 255),
stop:0.4825 rgba(101, 104, 113, 235),
stop:0.6 rgba(255, 255, 255, 0));
image: url(:/images/splitter.png);
}
Or something more drawn like this one.
QSplitter::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
stop:0 #eee, stop:1 #ccc);
border: 1px solid #777;
width: 13px;
margin-top: 2px;
margin-bottom: 2px;
border-radius: 4px;
}
For this last one, we specifically only override the horizontal splitter, because of some of the properties - like margin-top and bottom, and width that would need to be different if we were changing the vertical splitter.
Hope this helps. Once you start playing with Style sheets the fun really begins.
The QSplitter has a handleWidth property you can set.
Without going into all the gory details of style sheets I can give you a couple of options:
1) You can layout a couple of QFrames in your splitter, give them layouts and the put your widgets inside of those frames. You can use the layouts' spacing options (see QLayout::setContentsMargin()) to add some spacing around your widgets.
2) The style-sheet way (and in my opinion superior way) is to setup some style sheets for your widgets. For a brief example you can do something like this on your widgets that are in your splitter:
widget->setStyleSheet( "margin-left: 10px" )
If you're doing any kind of GUI design with Qt, I highly recommend you learn all about style sheets, they are your friend. See the Qt style sheets reference for some documentation.
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.