Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-72584

Spinbox styling problems on macOS

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • P2: Important
    • None
    • 5.10.0, 5.11, 5.12.0
    • Widgets: Style Sheets
    • None
    • macOS 10.14.2
    • macOS

    Description

      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:

      This is with Qt5:

      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.

      There are a number of already-open bug tickets that cover issues that appear to be related or overlapping, in particular QTBUG-72428, also QTBUG-27439 and QTBUG-70343. In the first of those tickets it's suggested that the styling should be using background instead of background-color. This would only be a partial solution, but I've tried it and it doesn't work anyway.

      Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            qt.team.quick.subscriptions Qt Quick and Widgets Team
            benis benis
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:

              Gerrit Reviews

                There are no open Gerrit changes