Style for custom QWidget

sting

I have built a custom widget that inherits from QWidget. It is composed of a bunch of QLabels and it's purpose is ontl to display information. The problem is I want to put a border on it and have the border not be around all of the QLabel instances.

@
ToneWidget::ToneWidget(QWidget* parent) : QWidget(parent)
{
setStyleSheet("border: 1px solid black; border-radius: 2px");
mainLayout = new QGridLayout(this);
mainLayout->setSpacing(2);
mainLayout->setMargin(0);
mainLayout->setContentsMargins(0,0,0,0);

waveLabel = new QLabel("Wave: ");
waveValue = new QLabel("");
toneLabel = new QLabel("Tone: ");
toneValue = new QLabel("");
beatLabel = new QLabel("Beats: ");
beatValue = new QLabel("");

mainLayout->addWidget(waveLabel, 0, 0);
mainLayout->addWidget(waveValue, 0, 1);

mainLayout->addWidget(toneLabel, 1, 0);
mainLayout->addWidget(toneValue, 1, 1);

mainLayout->addWidget(beatLabel, 2, 0);
mainLayout->addWidget(beatValue, 2, 1);

}
@

The border ends up around all of the QLabel instances and not around the widget itself. I have tried many options and they all turn out the same, or no border :). I have tried even after the instance is created. Seems like I am missing something important.

SGaist

Hi,

You have to be more specific in your style sheet e.g.

@
setObjectName("ToneWidget");
setStyleSheet("QWidget#ToneWidget {border: 1px solid black; border-radius: 2px}");
@

Hope it helps

sting

I did what you said in one of my many attemps, I used different names and it didn't work. I tried "ToneWidget" and there are no borders anywhere?

@
ToneWidget::ToneWidget(QWidget* parent) : QWidget(parent)
{
segmentIndex = -1;
setObjectName("ToneWidget");
setStyleSheet("QWidget::ToneWidget {border: 2px solid black; border-radius: 2px}");
//setStyleSheet("border: 1px solid black; border-radius: 2px");
...
@

Something else is probably wrong. I have this working for a class higher in the heirarchy, so I don't understand why this doesn't work.
...

SGaist

Copy paste error ?

sting

Sorry, that was stupid of me, I read a different post and I just tried it from memory, which is failing me. I changed the :: to # but the result is the same.

I just tried something else. Where it worked before was with a QGroupBox so I made this custom widger inherit from QGroupBox and it works. I have 2 different group boxes qith different border's.
@
ToneWidget::ToneWidget(QWidget* parent) : QGroupBox(parent)
{
segmentIndex = -1;
setObjectName("bar");
setStyleSheet("QWidget#bar {border: 2px solid red; border-radius: 2px}");
@
If I try it with QWidget in another custom widget, it doesn't work there either. It seems to work with QGroupBox and not with QWidget for some reason.

SGaist

Are you using style sheets in other places ?

sting

Yes, I have 2 qgroupbox classes that use them successfully. Each one with different parameters and it does it correctly. Just anywhere I try to use them on qwidget they don't work for me.

SGaist

Can you show a complete minimal sample code where it fails for you ?

Which version of Qt are you using ?

sting

Sorry this took so long, way too much soccer going on this weekend :)

I am using Qt Creator 3.1.2 (opensource)
Based on Qt 5.3.1 (GCC 4.6.1, 64 bit)

In the example if I switch the 2 commented out lines to be QGroupBox the stylesheet works perfectly. If I use the QWidget then it doesn't work at all.

@
// This is ToneWidget.h
class ToneWidget : public QWidget
//class ToneWidget : public QGroupBox
{
Q_OBJECT
public:
ToneWidget(QWidget* parent = 0);
};
@
@
// This is ToneWidget.cpp
#include "ToneWidget.h"

ToneWidget::ToneWidget(QWidget* parent) : QWidget(parent)
//ToneWidget::ToneWidget(QWidget* parent) : QGroupBox(parent)
{
setFixedWidth(100);
setObjectName("bar");
setStyleSheet("QWidget#bar {border: 2px solid red; border-radius: 2px}");
}
@
@
//This is mainwindow.cpp
#include "mainwindow.h"
#include "ToneWidget.h"

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
ToneWidget *tone = new ToneWidget();
setCentralWidget(tone);
}

MainWindow::~MainWindow()
{}
@

SGaist

Just to be sure, with only this code it doesn't work ? What are your other style sheets ?

sting

With this code it doesn't work for QWidget and it does for QGroupBox. The other stylesheets I use that work are for QGroupBox. For QGroupBox I use the border section and the QGroupBox::title selector.

SGaist

This code is working fine here. Can you post all your style sheets ?

sting

I have changed everything to use QGroupBox temporarily and it seems to work. I wonder if it is a problem with my environment. I am using ubunto linux as a host. It supprised me that that simple of an application caused the issue to show.

SGaist

Does it also happen if you set this style sheet on a default project ? Just create a new one using a QDialog as base class and set the style sheet on it

sting

I made the dialog example and I think I found the following:

If I use a plain QWidget the stylesheets work fine.

If I use a custom widget that inherits from QWidget the style sheets do not work.

If I use a custom widget that inherits from QGroupBox it does work. Just the same as my other example.

@
Dialog::Dialog(QWidget *parent)
: QDialog(parent) {
QVBoxLayout *mainLayout = new QVBoxLayout;
setLayout(mainLayout);
//QWidget *widget = new QWidget(this);
//QGroupBox *widget = new QGroupBox(this);
ToneWidget *widget = new ToneWidget(this);
widget->setFixedWidth(100);
widget->setFixedHeight(100);
//widget->setObjectName("Foo");
//widget->setStyleSheet("QWidget#Foo {border: 2px solid red; border-radius: 2px}");
//widget->setStyleSheet("QGroupBox#Foo {border: 2px solid red; border-radius: 2px}");
// Try to set it externally
//widget->setStyleSheet("ToneWidget#Foo {border: 2px solid red; border-radius: 2px}");
mainLayout->addWidget(widget);
}
@

@
class ToneWidget : public QWidget
//class ToneWidget : public QGroupBox
{
Q_OBJECT
public:
ToneWidget(QWidget* parent = 0);
};
@

@
ToneWidget::ToneWidget(QWidget* parent) : QWidget(parent)
//ToneWidget::ToneWidget(QWidget* parent) : QGroupBox(parent)
{
setFixedWidth(100);
setFixedHeight(100);

setObjectName("bar");
setStyleSheet("QWidget#bar {border: 2px solid red; border-radius: 2px}");
//setStyleSheet("QGroupBox#bar {border: 2px solid red; border-radius: 2px}");
//setStyleSheet("ToneWidget#bar {border: 2px solid red; border-radius: 2px}");

}
@

SGaist

Which OS are you running on ? I can't make it fail here

sting

I am using ubuntu the latest 64 bit version. 14.3 or 14.4 I will check again when I get home.

sting

I will take it to work tomorrow and try it on a windows machine. I will be depressed if it works on windows and not on linux.

sting

"From the Qt 5 documentation"http://qt-project.org/doc/qt-5/stylesheet-reference.html

QWidget Supports only the background, background-clip and background-origin properties.

I should have read this a long time ago. Sorry to waste your time.

SGaist

Which one were you trying to use ?

sting

setStyleSheet("QWidget {border: 2px solid red; border-radius: 2px}");

SGaist

This one should be working

sting

I just did the same experiment on a Windows machine with Qt Creator 3.1.2
Based on Qt 5.3.1 (MSVC 2010, 32 bit) with the same device. If I take any QWidget and apply the above stylesheet and it doesn't work. If I change the QWidget to a QGroupBox with the appropriate change in the stylesheet the border does show.

I have just changed all of the QWidgets that I need a border around to QGroupBox for now. Should I mark this thread closed?

Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Style for custom QWidget