Reputation: 318
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:
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
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