heczaco
heczaco

Reputation: 318

ComboBoxStyle QML QT Label not working

I'm trying to customize the label on a combobox, but it doesn't seem to be working, I have the following code:

  ComboBox {
    id:tableName
    editable: true
    currentIndex: 0
    model: eventModel.getTables()
    anchors.left: parent.left; anchors.leftMargin: 20
    y: parent.height/10
    width: buttonWidth
    height: 70
    style: ComboBoxStyle {
        id:comboStyle
        background: Rectangle {
            id: rectCategory
            width: control.width
            height: control.height
            color: "#FFECECEC"
            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 2
                font.pointSize: 15
                font.family: "sans serif"
                color: control.hovered?"#FF6BC1E5":"#FF404040"
                text:"˅"
            }
        }

        label: Label{
                Rectangle{anchors.fill: tableName; color:"red"}
                anchors.right: parent.right
                anchors.rightMargin:10
                font.pointSize: 12
                font.family: "sans serif"
                color: "black"
                text:control.currentText
        }


        // drop-down customization here
        property Component __dropDownStyle: MenuStyle {
            __maxPopupHeight: 600

            __menuItemType: "comboboxitem"

            frame: Rectangle {              // background
                color: "#FFACACAC"
            }

            itemDelegate.label: Text {
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 12
                font.family: "sans serif"
                color: styleData.selected ?  "#FF6BC1E5" : "#FF404040"
                text: styleData.text
            }

            itemDelegate.background: Rectangle {  // selection of an item
                color: styleData.selected ?  "#FF404040" : "#FFECECEC"
            }

            __scrollerStyle: ScrollViewStyle { }
        }


    }

the dropdown customization seems to work pretty fine, but the label stays the same, this is the output I get:

enter image description here

thanks to jpnurmi, I found a style that worked:

ComboBoxStyle {
        id:comboStyle
        textColor:"blue"
        font{
            pointSize:15
            family:"sans serif"
        }

        background: Rectangle {
            id: rectCategory
            width: control.width
            height: control.height
            color: "#FFECECEC"

            Image {
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 5
                source:control.hovered?"images/select2.png":
                                        "images/select.png"
            }
        }

        __editor:
            Rectangle {
            anchors.fill: parent
            color: "#00000000"
        }



        // drop-down customization here
        property Component __dropDownStyle: MenuStyle {
            __maxPopupHeight: 600

            __menuItemType: "comboboxitem"

            frame: Rectangle {              // background
                color: "#FFACACAC"
            }
            itemDelegate.label: Text {
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 12
                font.family: "sans serif"
                color: styleData.selected ?  "#FF6BC1E5" : "#FF404040"
                text: styleData.text
            }
            itemDelegate.background: Rectangle {  // selection of an item
                color: styleData.selected ?  "#FF404040" : "#FFECECEC"
            }
            __scrollerStyle: ScrollViewStyle { }
        }


    }

Upvotes: 1

Views: 2118

Answers (1)

jpnurmi
jpnurmi

Reputation: 5836

The read-only label is for a non-editable ComboBox. Try this:

    style: ComboBoxStyle {
        font.pointSize: 12
        font.family: "sans serif"
        textColor: "black"
        background: Rectangle {
            ...
        }

        __editor: Rectangle {
            color: "red"
        }

        ...
    }

Upvotes: 1

Related Questions