Important: Please read the Qt Code of Conduct -

Stylesheet issue with QSpinBox

  • Hi
    I have recently started to use stylesheets in my projects to help bring them to life. While I mostly understand the basics of them and their application on simple widgets I have had issues with more complex modifications.
    The issue I have is regarding the modification of QSpinBox buttons. Below is an example of what I am doing.
    QWidget *mainWidget = new QWidget;
    QWidget *child = new QWidget(mainWidget);
    QSpinBox *spinner1 = new QSpinBox(child);
    QSpinBox *spinner2 = new QSpinBox(child);
    QGridLayout *grid = new QGridLayout();

    grid->addWidget(spinner1, 2, 0, Qt::AlignTop);
    grid->addWidget(spinner2, 2, 1, Qt::AlignTop);


    mainWidget->setStyleSheet( "QSpinBox { border: 2px solid #000000; border-radius: 5px;}"
    "QSpinBox::up-button, QSpinBox::down-button {width: 70px; height: 70px; border: 2px solid #000000; border-radius: 2px; background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop: 0 #ffe670, stop: 1 #ffde40);}"
    "QSpinBox::up-arrow { border-left: 17px solid none; border-right: 17px solid none; border-bottom: 17px solid black; width: 0px; height: 0px; }"
    "QSpinBox::down-arrow { border-left: 17px solid none; border-right: 17px solid none; border-top: 17px solid black; width: 0px; height: 0px; }"
    "QSpinBox::up-button:off, QSpinBox::down-button:off {background-color: lightgrey; color: #eeeeee; }"
    "QSpinBox::up-arrow:off {border-left: 17px solid none; border-right: 17px solid none; border-bottom: 17px solid #eeeeee; background-color:lightgrey}"
    "QSpinBox::down-arrow:off {border-left: 17px solid none; border-right: 17px solid none; border-top: 17px solid #eeeeee; background-color: lightgrey}"
    Through my understanding of stylesheets I would expect the set parameteres applied to mainWidget to be passed to all of its childred and down to the children of its children. Therefore I expect this should correctly set the default sylesheet for any QSpinBox used in my example.
    While the QSpinBox sylesheet is changed it does not apply to the two QSpinBox widgets in the same fashion. One one of them the arrows appear as black rectangles while the other shows them as black triangles. Also when reaching the maximum and minimum values the background of some of the arrows are set to white.
    I am not sure why this is occuring as I have confirmed the validity of the stylesheet through the design interface and the most confusing element is the fact that the issues seen do not always appear on the same elements of the QSpinBox (sometimes on the up arrows, sometimes the down).
    I have been setting styleshees in a similar manner for all my QPushbuttons and they seem to work fine.
    Any help or insight would be greatly apreciated.

    Edit: I have tried assigning the same stylesheet to each QSpinBox seperately and this appeas to give the desired performance. This adds further confusion for me. While this method works I dont understand why the first apraoch did not and it becomes cumbersome when many QSpinBoxes are in use. If possible I would rather not have to do it this way.

    Edit 2: Further investigation has shown that all threee methods of setting stylesheets give the odd behaviour. This however does not happen on all QSpinBoxes (most are rendered as expected) and can occur on different QSpinBoxes. This may have something to do with the code within my stylesheet (but the Qt Creator design view does not complain about it and renderes it as expected).

  • For anyone interested I have implemented a more suitable workaround:
    foreach(QWidget *widget, QApplication::allWidgets())
    // Set stylesheet here
    This seems to implement the correct sylesheet to all QSpinboxes and removes the need for multiple occurences of identical code.
    However I am still unsure why the origional method did not work and if someone could offer any insight that would be great.

  • Did yu set any window flags for your application?

  • Hi guru
    I do not set any window flags and im not sure how they would help me in this situation. The main reason being i am not using any windows. I show all my GUI elements on my mainWidget and show/hide different portions of the GUI at different times.
    I have little experience with window flags, but isn't their function to select the type of window being used and some certain fetures you want to atribute to them? If you could elaborate slightly on why you think they might help me that would be great.

  • I mean, did you use following code,
    Because this will change your style sheet properties inherited from parent.

  • No, I will try that at some point. Not able to test it for a day or two though.
    Thanks for the advice :-)

Log in to reply