Using Qt Creator, I have set a QWidget's background property to black. However, some parts of the QWidget, more specifically, between QFrames/QGroupBoxes are still in its system's default color.
Now, I thought that the QFrames and QGroupBoxes need to have its background property set to black too, but it did not work. I have also tried setting the border-color to black, but it does not work, since by default borders, margins are set to 0.
QWidget { background: black; }
Any advice on this issue?
EDIT
The QWidgets are placed in QMdiArea. However, if I make it a QWindow, it works. However, I want the QWidgets to be in the QMdiArea. Also, if I just show the QWidgets as it is, the spaces that I have mentioned above are transparent.
It sounds like you have some widgets within another widget, and are setting the contained widgets to be black, but then the space between them is not black. If that is the case, it is likely because you have a layout in the containing widget, which allocates space between each contained widget. The empty space between widgets will be drawn with the containing widget's background color.
Found out the solution. It seems that you need to set the background color at the QMdiSubWindow, not at QWidget. Don't know why, but it seems logical.
Related
Using stylesheets, if I set background-color of a QDialog, I don't seem to be able to control the width of the visible colour - the gap between the content and the actual border. For example if I create a QDialog with only a QListWidget on it, in a QGridLayout, I see the background-color appear as a border around the QListWidget. I would like to make this thinner.
How can I reduce this "border"? It looks as thought background-clip would work if QDialog supported the box model.
I am on 4.7 if it makes any difference
That's the layout border. You can reduce it from the design editor by selecting yout QDialog then adjusting the layoutLeftMargin/layoutTopMargin/layoutRightMargin/layoutBottomMargin properties.
You can also set the border width by code by calling setContentMargins on the layout. For example:
ui->gridLayout->setContentsMargins(3,3,3,3); // sets the qdialog border width to 3px.
I have a QDockWidget:
I would like to alert the user to certain events by setting the background color of the title bar.
I have achieved this by setting the style sheet for my DockWidget:
void DockWidget::setCriticalAlert()
{
setStyleSheet("QDockWidget { background-color:red; }");
}
The result is this:
The problem is that the background-color doesn't get applied when the QDockWidget is docked:
How can I get the background color to be applied when the QDockWidget is docked?
This is a bug in Qt.
Issue 10537
Quoting from the linked issue:
The problem is that in QDockWidget::paintEvent, there is a
isFloating() condition before drawing PE_FrameDockWidget. We cannot
jsut remove this condition as it would break the other style (that
does not whish to draw frame when the dockwidget is docked) We cannot
either use PE_Widget to draw the frame as then it goes over the
dockwidget's title The solution is maybe to introduce a new
PE_FrameDockWidgetDocked primitive element. Or some
SH_DockWidget_DrawDockedFrame stylehint to draw the frame in every
cases.
a valid workaround seems to be to set the stylesheet of the parent, and use the class-and-id selector. Forgive the python formatted code but the concept is the same - in this case, 'dock' is a QDockWidget which has been given an object name using setObjectName(), and its parent, the QMainWindow, is 'self':
self.setStyleSheet("QDockWidget#"+str(dock.objectName())+"::title {background-color:red}")
In PyQt5.5, this works at runtime, i.e., can be changed on the fly.
I find a solution like this:
Firstly put a frame behind all the widgets of dockwidget's center widget, as the background.
Then set stylesheet for the frame.
By this way, we could change the background color of dockwidget.
Or you can extend the dockwidget and overwrite the function
void QDockWidget::setWidget(QWidget *widget)
using private/qdockwidget_h. and add a frame as this widget's father.
I have a QLabel and a QPushButton added to a QHBoxLayout. The QLabel has its margins set to 0 and the layout has margin and content margins set to 0. The label and button have the same background color and the button has border set to none. However, the button still looks with a brighter color than the label and there is some extra space around the button, so it doesn't look like it's "glued" to the label. I want them to look like one big widget.
In Qt, margins describe the space surrounding the layout. In newer versions of Qt, the margins on the top/bottom/left/right can be set individually through setContentsMargins().
The space between widgets in the same layout is described by the spacing property. The spacing has nothing to do with the margins. Try calling hboxLayout->setSpacing(0); This should work.
Some days ago I have coded a widget with similar behavior. To avoid problems with margins and colors I can recommend to use second QPushButton button instead of QLabel and set both buttons to be flat with btn->setFlat(true);
I have annoying problem. I created QVBoxLayout on which I added my widgets.
This is sample from my constructor:
layout = new QVBoxLayout;
layout->setMargin(0);
layout->setContentsMargins(QMargins(0,0,0,0));
layout->setSpacing(0);
And then I have function to add widgets.
layout->addWidget(_wave);
_wave is my own widget. But you can add whatever you want, for example QButton.
What do I want achieve?
Similar like this but without any spaces beetween widgets added to layout. Just only QButtons or other widget, sticked each other.
I added everywhere setMargins, setSpacing etc.
Please help me with that, I don't really have an idea what should I do.
Sorry for colors, but I wanted to mentioned what I want to achieve. I have mainWindow on which I added QWidget. This widget have blue background. Then to the layout, Im addding some widgets, which are orange on this image. I just want to be sure, that this blue background between widget isnt visible. I want to have widget under widget, without any space.
I know the question was posted a year ago, but if it can help some people save some time, I would be glad. I had the same problem and was able to solve it by setting:
QFrame.setFrameShape() to NoFrame
QFrame.setLineWidth() to 0.
The image below is the result of 2 QtextEdit put side by side in a Layout, using the described method.
http://doc.qt.io/qt-5/qframe.html#lineWidth-prop
Try this to achieve a "tight" look. Note that if you resize the parent widget, they will not move. Not sure if this is what you want or not, but...
// After all widgets are added to the layout
layout->insertStretch( -1, 1 );
The 2nd argument needs to be higher than any other stretch factor. Stretch factor is default zero, so if you don't set it, the above one-liner should work.
Spacing Never Zero?
As the Qt document says, some default GUI widget has extra frame around it.
Take QPushButton as an example:
In some GUI styles a default button is drawn with an extra frame
around it, up to 3 pixels or more. Qt automatically keeps this space
free around auto-default buttons, i.e. auto-default buttons may have a
slightly larger size hint.
So the culprit is not the layout but the widget itself instead. "Invisible" margin of a default widget remains even if the spacing of the layout has been set to 0.
Soultion
If you really need a "compact" layout, my suggestion is to resort to the stylesheet of the widget.
Examples
Here are examples to illustrate the idea:
Here, we have a vertical layout with both margin and spacing equal to 0, and the buttons with custom stylesheet:
QPushButton {
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
min-width: 80px;
}
// (further stylesheet for button click is needed)
Resetting stylesheet allows us to make the layout more compact:
Insert a default QPushButton to see the difference:
You can see there is space around the default QPushButton. That's the same for other kinds of widgets.
I could be wrong but there does not seem to be an obvious and non-hack of a way to do what you desire. However, according to the documentation you may find that just doing a manual layout will solve your problem. (http://doc.qt.io/qt-5/layout.html : Manual Layout)
It seems as if one could implement a Layout class that actually provides a very compact horizontal or vertical layout and I believe I had written one a few years ago using Python and Qt. With that in mind, you should be able to implement your own MyCompactLayout(horizontal=True) and use it.
I am writing a little program in C++ with Qt.
I have a QGridLayout with 3*3 QWidget. In each QWidget, I have a QVBoxLayout.
Within that QVBoxLayout I need to put a certain number of black and white rectangles.
For now, I use QWidgets for these rectangle and I apply a background-color to get the white and the black ones.
I saw in the documentation something about a Rectangle class that is linked with QtQuick and I don't really want to go into that.
Thanks for your answers,
I wouldn't bother with the layout and widgets unless you actually need interactive objects for each square. Just overload the paintEvent member of the widget you are using that contains the grid layout and use the QPainter object and call fillRect.
To get an outline around a widget, use a QFrame. Also QLabel subclasses QFrame. There are a lot of examples of using QFrame in the documentation.
Hope that helps.