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

Simple combobox style broken on Mac

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • P3: Somewhat important
    • Some future release
    • 4.8.4, 5.5.0, 5.12.1
    • Widgets: Style Sheets
    • None
    • OSX
    • macOS

    Description

      This has been broken in Qt for a long time, at least since Qt 4.7.

      The following stylesheet is used to style a vanilla QComboBox. The QCombox font has been set to Trebuchet MS 12.

      On Windows it works correctly but there are multiple issues on Mac:

      1) The Mac version ignores the selection-background-color completely and instead draws a weird blue gradient.
      2) The Mac version has rounded corners when it should not.
      3) The Mac version displays the list centered above the widget when it should be below.
      4) The Mac version displays a tick mark when it should not.
      5) The Mac version ignores the left zero-width padding.

      It is possible to work around these problems but it is not easy. Applying the plastique style corrects most of the issues but has it's own problems.

      QComboBox QAbstractItemView {
          selection-background-color: #4d4d4d;
          background-color: #2c2c2c;
          border-width: 1px;
          padding: 5px 0px 5px 0px;
          border-style: solid;
          border-color: #4d4d4d;
          color: #cbcbcb;
          selection-color: #FFFFFF;
      }
      
      QComboBox {
          border-image: url(:/Images/ComboboxDefault.png) 1px 35px 1px 11px;
          border-width: 0px 34px 0px 10px;
          color: #cbcbcb;
      }
      
      QComboBox:hover {
          border-image: url(:/Images/ComboboxOver.png) 1px 35px 1px 11px;
          border-width: 0px 34px 0px 10px;
      }
      
      QComboBox:on {
          border-image: url(:/Images/ComboboxDown.png) 1px 35px 1px 11px;
          border-width: 0px 34px 0px 10px;
      }
      
      QComboBox::down-arrow {
          image: none;
          width: 16px;
          height: 16px;
      }
      
      QComboBox::down-arrow:hover {
          image: none;
          width: 16px;
          height: 16px;
      }
      
      QComboBox::up-arrow {
          image: none;
          width: 16px;
          height: 16px;
      }
      
      QComboBox {
          padding-left: 3px;
          padding-right: -15px; /* space for the arrow */
      }
      
      QComboBox::drop-down {
          subcontrol-origin: margin;
          subcontrol-position: top right;
          width: 20px;
          border-style: none;
          border-image: none;
      }
      
      

      In addition, if the combo is set as editable, it is drawn incorrectly in the Designer (on both Mac and Windows).

      Attachments

        1. ComboboxDefault.png
          ComboboxDefault.png
          1 kB
        2. ComboboxDown.png
          ComboboxDown.png
          1 kB
        3. ComboboxOver.png
          ComboboxOver.png
          1 kB
        4. StyledCombo.png
          StyledCombo.png
          86 kB
        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
            danny77uk Daniel
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

            Dates

              Created:
              Updated:

              Gerrit Reviews

                There are no open Gerrit changes