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
    ListModel{
        id: modelList
        ListElement{ text: "First" }
        ListElement{ text: "Second" }
        ListElement{ text: "Third" }
    }
    
    ComboBox {
        id: comboButton
        width: parent.width
        height: parent.height
        model:modelList
        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 {
            id:itemDelegate
            width: comboButton.width
    
            background:Rectangle{
                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"
            //height:100
            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
    
            }
        }
    
        onCurrentIndexChanged:
        {
            btntext = mainDropDown.get(currentIndex).text
            dropDownIndexChanged(currentIndex)
            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.



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