QML ComboBox set Font

nando76

Hi,

i am very new to qml. Maybe somebody could help me please... :)

Does somebody knows how to set a specific font to a comboBox im qml?

I need this for the drop-down and for the lineedit (if the comboBox is editable).

Greetings
Nando

p3c0

Hi,

bq. I need this for the drop-down and for the lineedit (if the comboBox is editable).

AFAIK this has not been provided yet.

dheerendra

Did you check on style parameter ? Here one sample which I have.

@ ComboBox {
id : cBox4
width: 100
height: 40
model : ["Banana","Apple","Lemon"]
style: ComboBoxStyle {
background: Rectangle{
height: control.height
width: control.width
color : "blue"
}
label: Rectangle{
height: 140
width: 20
color : "green"
Text {
text : control.editText
font.pointSize: 25
font.bold: true
}
}
}
}
@

p3c0

The OP needs this for the Drop-Down as far as i see it in the question.

[quote author="Dheerendra" date="1410516619"]Did you check on style parameter ? Here one sample which I have.

@ ComboBox {
id : cBox4
width: 100
height: 40
model : ["Banana","Apple","Lemon"]
style: ComboBoxStyle {
background: Rectangle{
height: control.height
width: control.width
color : "blue"
}
label: Rectangle{
height: 140
width: 20
color : "green"
Text {
text : control.editText
font.pointSize: 25
font.bold: true
}
}
}
}
@[/quote]

dheerendra

Thanks you P3C0 for pointing out this. Question also said lineEdit. Some tweak may lead up the font of drop down as well.

qwasder85

Hi, I'm a bit late to the party, but this might help others in the future.
You probably already found this post concerning the style of the ComboBox's dropdown: https://forum.qt.io/topic/32611/how-to-customize-combobox-from-qtquick-controls

If you have an editable ComboBox, you can change the appearence of the LineEdit component by changing the content of the internal __editor Component:

__editor: Item {
    implicitWidth:  100
    implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
    clip:           true

    Rectangle {
        anchors { fill: parent; bottomMargin: 0 }
        color:  "#44ffffff"
        radius: baserect.radius
    }

    Rectangle {
        id: baserect

        anchors     { rightMargin: -radius; bottomMargin: 1 }
        gradient: Gradient {
            GradientStop { color: "#e0e0e0" ; position: 0 }
            GradientStop { color: "#fff" ; position: 0.1 }
            GradientStop { color: "#fff" ; position: 1 }
        }
        radius: TextSingleton.implicitHeight * 0.16
        anchors.fill: parent
        border.color: control.activeFocus ? "#47b" : "#999"
    }
    Rectangle {
        color: "#aaa"
        anchors.bottomMargin: 2
        anchors.topMargin: 1
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: 1
    }
}