Style for custom QWidget



  • 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.


  • Lifetime Qt Champion

    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



  • 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.
    ...


  • Lifetime Qt Champion

    Copy paste error ?



  • 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.


  • Lifetime Qt Champion

    Are you using style sheets in other places ?



  • 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.


  • Lifetime Qt Champion

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

    Which version of Qt are you using ?



  • 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()
    {}
    @


  • Lifetime Qt Champion

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



  • 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.


  • Lifetime Qt Champion

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



  • 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.


  • Lifetime Qt Champion

    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



  • 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}");
    

    }
    @


  • Lifetime Qt Champion

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



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



  • 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.



  • "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.


  • Lifetime Qt Champion

    Which one were you trying to use ?



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

  • Lifetime Qt Champion

    This one should be working



  • 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?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.