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

Spinbox styling problems with Qt5 & C++ on Mac



  • Hello,

    I'm working on Mixxx, trying to figure out a styling issue. The app has a music library browser which includes a bpm column composed of a 'lock' checkbox and a double spinbox. The spinbox displays when you click on the bpm cell in an already-selected row, assuming it isn't locked.

    The current full release was built with Qt4, but will be moving to Qt5 in an upcoming version. For anything that's built with Qt5, the styling for the spinbox in the bpm cell is being ignored, along with the actual cell dimensions. Styling is done via a qss file and I can't work out why this particular element doesn't seem to respond to styling.

    This is the appearance with Qt4:
    0_1544736023020_Screenshot 2018-12-13 at 20.57.06.png

    This is with Qt5:
    0_1544736045018_Screenshot 2018-12-13 at 20.58.31.png

    The underlying code and qss are the same in both instances. The checkbox/lock icon has no problems with styling correctly.

    This is the code for the delegate class:

    class BpmEditorCreator : public QItemEditorCreatorBase {
      public:
        BpmEditorCreator() {}
        virtual ~BpmEditorCreator() {}
    
        virtual QWidget* createWidget (QWidget* parent) const {
            QDoubleSpinBox* pBpmSpinbox = new QDoubleSpinBox(parent);
            pBpmSpinbox->setFrame(false);
            pBpmSpinbox->setMinimum(0);
            pBpmSpinbox->setMaximum(1000);
            pBpmSpinbox->setSingleStep(1e-8);
            pBpmSpinbox->setDecimals(8);
            pBpmSpinbox->setObjectName("LibraryBPMSpinBox");
            return pBpmSpinbox;
        }
    
        virtual QByteArray valuePropertyName() const {
            return QByteArray("value");
        }
    };
    
    BPMDelegate::BPMDelegate(QTableView* pTableView)
            : TableItemDelegate(pTableView),
              m_pTableView(pTableView),
              m_pCheckBox(new QCheckBox(m_pTableView)) {
        m_pCheckBox->setObjectName("LibraryBPMButton");
        // NOTE(rryan): Without ensurePolished the first render of the QTableView
        // shows the checkbox unstyled. Not sure why -- but this fixes it.
        m_pCheckBox->ensurePolished();
        m_pCheckBox->hide();
    
        // Register a custom QItemEditorFactory to override the default
        // QDoubleSpinBox editor.
        m_pFactory = new QItemEditorFactory();
        m_pFactory->registerEditor(QVariant::Double, new BpmEditorCreator());
        setItemEditorFactory(m_pFactory);
    }
    

    This is an example of the qss. There are multiple skins but this bit is the same in all of them:

    #LibraryBPMSpinBox {
        color: #fff;
        selection-color: #0f0f0f;
        background-color: #0f0f0f;
        selection-background-color: #888;
        padding: -1px -8px -1px -4px;
        margin: -2px 0px -2px -2px;
      }
    
    

    I've tried just using the * selector in the qss to see if that element can be accessed at all, and numerous other elements of the UI get styled appropriately if I do, but not this one.

    I've seen this issue using Qt5.10, 5.11 and 5.12. I am currently on a 2014 MBP running macOS 10.14.2. There haven't been any issues with this reported on other platforms. It has been necessary to update the styling for other spinboxes with the move to Qt5, but those issues have been resolved fairly easily.

    Thanks.


  • Lifetime Qt Champion

    Hi and welcome to devnet,

    This reminds of something, you should check the bug reports system to see if there's not already something being done about it.



  • @SGaist Thanks, I did wonder if there was another place to report this. Will check it out.


Log in to reply