QML ComboBox set Font



  • 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


  • Moderators

    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.



  • 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
    }
    }
    }
    }
    @


  • Moderators

    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]



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



  • 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
        }
    }
    

Log in to reply
 

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