Search code examples
pythonpyqtpyqt4stylesheetqwidget

PyQt4 - Applying a stylesheet on an object which inherits from QWidget


I am having an issue with PyQt4. I have a class which inherits from QWidget. This class uses a layout to store a QLabel and a QLineEdit. Here is the code:

class SearchBar(QtGui.QWidget):
    def __init__(self, parent=None):
        super(SearchBar, self).__init__(parent)
        self.setStyleSheet(SEARCHBAR_STYLE)

        layout = QtGui.QHBoxLayout()
        layout.setSpacing(0)
        layout.setMargin(0)
        layout.addStrut(SEARCHAR_HEIGHT)

        lbl_notification = QtGui.QLabel('Hi')
        lbl_notification.setStyleSheet(SEARCHBAR_NOTIFICATION_STYLE)
        layout.addSpacing(10)
        layout.addWidget(lbl_notification)

        searchbox = QLineEdit('Search')
        layout.addStretch()
        layout.addWidget(searchbox)
        layout.addSpacing(10)

        self.setLayout(layout)

and here is the stylesheet:

SEARCHBAR_STYLE = """
                  QWidget {
                      background: #424a7d;
                  }
                  .QWidget {
                      border: 1px solid grey;
                  }
                  QLabel {
                      border-top: 1px solid grey;
                      border-bottom: 1px solid grey;
                  }
                  """

Now, my problem is that the stylesheet does not apply the way I would like it to. It only applies on my QLabel when the border should be around the whole object:

enter image description here

When I had a function creating my search bar as a QWidget, it worked perfectly, but now that I changed that to a class it does not work. What am I doing wrong?

EDIT: I am trying to achieve this:

enter image description here

EDIT 2: The previous code, before I change it to a class, was this:

def create_bar():
    layout = QtGui.QHBoxLayout()
    layout.setSpacing(0)
    layout.setMargin(0)
    layout.addStrut(SEARCHAR_HEIGHT)

    lbl_notification = QtGui.QLabel('Hi')
    lbl_notification.setStyleSheet(SEARCHBAR_NOTIFICATION_STYLE)
    layout.addSpacing(10)
    layout.addWidget(lbl_notification)

    search_bar = QtGui.QLineEdit('Search')
    search_bar.setMinimumSize(200, 25)
    search_bar.setMaximumSize(200, 25)
    search_bar.setStyleSheet(SEARCHBOX_STYLE)

    layout.addStretch()
    layout.addWidget(search_bar)
    layout.addSpacing(10)

    widget = QtGui.QWidget()
    widget.setStyleSheet(SEARCHBAR_STYLE)
    widget.setLayout(layout)
    return widget

Solution

  • Change the base class of SearchBar from QWidget to QFrame, or alternatively implement a style sheet aware paintEvent:

    def paintEvent(self, event):
        opt = QStyleOption()
        opt.initFrom(self)
        painter = QPainter(self)
        self.style().drawPrimitive(QStyle.PE_Widget, opt, painter, self)
    

    Then change the style sheet to

    SEARCHBAR_STYLE = """
    SearchBar {
        background: #424a7d;
        border: 1px solid grey;
    }
    """