Qt World Summit: Submit your Presentation

QML combobox styling issue in QtQuick.Controls 2.2

  • I am a beginner and trying to use combobox to populate a list of elements, but when I tried to style there is some problem while displaying text, Below is the code:

    import QtQuick 2.7     
    import QtQuick.Controls 2.2
    Item {
        property string btntext : "First"
        signal dropDownIndexChanged(int index)
    id: mainDropDown
        id: modelList
        ListElement{ text: "First" }
        ListElement{ text: "Second" }
        ListElement{ text: "Third" }
    ComboBox {
        id: comboButton
        width: parent.width
        height: parent.height
        currentIndex: 0
        editText : btntext
        Image {
            id: imageMainButton
            x: 119
            anchors.top: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 9
            anchors.topMargin: -7
            fillMode: Image.Tile
            sourceSize.height: 25
            sourceSize.width: 25
            source: "<some image>"
        delegate: ItemDelegate {
            width: comboButton.width
                gradient: Gradient {
                    GradientStop {
                        position: 0.0
                        color: itemDelegate.down ? "white" : "blue"
                    GradientStop {
                        position: 1.0
                        color: itemDelegate.down ? "yellow" : "orange"
            contentItem: Text {
                text: modelData
                elide: Text.ElideRight
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 11
                font.family: "Arial"
                color:  itemDelegate.down ? "black" : "white"
            highlighted: comboButton.highlightedIndex === index
        indicator: Canvas {
    //When this is added combo box text disapears or will be empty until something else is selected from the dropdown.
        contentItem: Text {
            text: comboButton.displayText             
            anchors.centerIn: parent
            //font: comboButton.font
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
            renderType: Text.NativeRendering
            anchors.left : parent.left
            anchors.leftMargin: 10
            font.family: "Verdena"
            font.pointSize: 12
            font.bold: true
            color: "white"
        background: Rectangle {
            implicitWidth: 120
            implicitHeight: 40
            radius: 2
            color : "white"
            smooth: true
            //border.width: 1
            border.color: "white"
        popup: Popup {
            y: comboButton.height
            width: comboButton.width -5
            //implicitHeight: contentItem.implicitHeight -1
            padding: 1
            background: Rectangle {
                border.color: "black"
                radius: 2
                color : "white"
            contentItem: ListView {
                //clip: true
                implicitHeight: contentHeight
                model: comboButton.popup.visible ? comboButton.delegateModel : null
                currentIndex: comboButton.highlightedIndex
                interactive: false
            btntext = mainDropDown.get(currentIndex).text
            console.log(btntext ,currentIndex)
    1. As mentioned above why does combobox text is not displayed until I select an item from the drop down?

    2. The selected index/item is not highlighted at all.

  • @pra7 I can look into this if you make it a self-contained main.qml which opens a window when it's run.

  • @Eeli-K thanks for replying. I have almost solved the issue .and will post the answer soon.

  • @pra7 did you manage to solve it? I am facing the same issue. I cannot apply any stylesheet on a Combobox using QtQuick.Controls 2.2