Quick controls 2 ComboBox doesn't show the popup with the delegate



  • Hi Devs, I have tried to use a ComboBox with a model. On Desktop all works fine, but on ios (Iphone 7)
    the popup with the delegates are not show up.

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3
    import QtQuick.Controls.Material 2.2
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Example")
    
        Flickable {
            id: flickable
            anchors.fill: parent
            contentHeight: root.implicitHeight
            boundsBehavior: Flickable.OvershootBounds
    
            Pane {
                id: root
                anchors.fill: parent
    
                ColumnLayout {
                    anchors.right: parent.right
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
    
                    Label {
                        anchors { left: parent.left; right: parent.right }
                        topPadding: 10
                        bottomPadding: 10
                        font.pixelSize: 20
                        horizontalAlignment: Qt.AlignHCenter
                        text: qsTr("Example")
                    }
    
                    ComboBox {
                          textRole: "key"
                          model: ListModel {
                              ListElement { key: "First"; value: 123 }
                              ListElement { key: "Second"; value: 456 }
                              ListElement { key: "Third"; value: 789 }
                          }
                    }
    
                }
            }
        }
    }
    

    Have anyone the same problem?

    I use Qt 5.9.1 and QuickControls 2.2



  • @Manu19 Hi, you can use this.

    Customizing ComboBox
    ComboBox consists of background, content item, popup, and delegate.

    import QtQuick 2.6
    import QtQuick.Controls 2.1

    ComboBox {
    id: control
    model: ["First", "Second", "Third"]

      delegate: ItemDelegate {
          width: control.width
          contentItem: Text {
              text: modelData
              color: "#21be2b"
              font: control.font
              elide: Text.ElideRight
              verticalAlignment: Text.AlignVCenter
          }
          highlighted: control.highlightedIndex == index
      }
    
      indicator: Canvas {
          id: canvas
          x: control.width - width - control.rightPadding
          y: control.topPadding + (control.availableHeight - height) / 2
          width: 12
          height: 8
          contextType: "2d"
    
          Connections {
              target: control
              onPressedChanged: canvas.requestPaint()
          }
    
          onPaint: {
              context.reset();
              context.moveTo(0, 0);
              context.lineTo(width, 0);
              context.lineTo(width / 2, height);
              context.closePath();
              context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
              context.fill();
          }
      }
    
      contentItem: Text {
          leftPadding: 0
          rightPadding: control.indicator.width + control.spacing
    
          text: control.displayText
          font: control.font
          color: control.pressed ? "#17a81a" : "#21be2b"
          horizontalAlignment: Text.AlignLeft
          verticalAlignment: Text.AlignVCenter
          elide: Text.ElideRight
      }
    
      background: Rectangle {
          implicitWidth: 120
          implicitHeight: 40
          border.color: control.pressed ? "#17a81a" : "#21be2b"
          border.width: control.visualFocus ? 2 : 1
          radius: 2
      }
    
      popup: Popup {
          y: control.height - 1
          width: control.width
          implicitHeight: listview.contentHeight
          padding: 1
    
          contentItem: ListView {
              id: listview
              clip: true
              model: control.popup.visible ? control.delegateModel : null
              currentIndex: control.highlightedIndex
    
              ScrollIndicator.vertical: ScrollIndicator { }
          }
    
          background: Rectangle {
              border.color: "#21be2b"
              radius: 2
          }
      }
    

    }



  • It has been fixed in Qt 5.9.2. Here's the bug report: https://bugreports.qt.io/browse/QTBUG-61935 (including a workaround in the comment section).



  • @jpnurmi Thank you for this information.



  • @Manu19 no problem = D


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.