TextInput and font.pixelSize

DuBu

Hi all,

I would like the text to be as high as the TextInput. Therefore I do:

TextInput {
  font.pixelSize: height
}

But that gives me:

QML TextInput: Binding loop detected for property "font.pixelSize"

With a Text I would set the pixelHeight to a rather big value and set fontSizeMode accordingly:

Text {
  font.pixelSize: 1000
  fontSizeMode: Text.VerticalFit
}

But TextInput has no property "fontSizeMode".
Does anyone have an idea how to get the text as hight as the item?

Tirupathi Korla

@DuBu
You should set height before setting height to font..

TextInput {
   height: 40
  font.pixelSize: height
}

This won’t return any binding loop error...

DuBu

@Tirupathi-Korla Sorry, my example should have been a little more contextual. I can't set the height, it's calculated by a layout:

CulumnLayout {
  anchors.fill: parent
  Text {
    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.preferredHeight: 1
  }
  TextInput {
    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.preferredHeight: 2
    font.pixelHeight: height
  }
}

Tirupathi Korla

@DuBu
You may set font pixel size once the component is created or once its height changed....

TextInput {
    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.preferredHeight: 2
    // This is for fixed height
    Component.onCompleted: {
        font.pixelSize = height
    }
    // or you can use this..
     onHeightChanged: {
        font.pixelSize = height
     }
}

DuBu

@Tirupathi-Korla Thanks, I wanted to avoid using a function with an assigment. I wanted to use a binding but the errors are often pretty annoying and it's often not obvious why there should be a loop.

DuBu

@Tirupathi-Korla You are right! I've been told by the Qt support team, the binding loop is the following:

font.pixelHeight: height
implicitHeight: font.pixelHeight
height: implicitHeight

To break the binding with implicitHeight and thus the loop one can set the height to an arbitrary value.
Now it looks like this and it seems to work:

TextInput {
  Layout.fillHeight: true
  Layout.preferredHeight: 2
  height: 0 // just to break the loop
  font.pixelSize: height
}

Defining a height breaks the loop but interestingly Layout.preferredHeight still wins.

GrecKo

@DuBu Interesting approach, defining implicitHeight instead of height would break the binding loop too I believe, it's maybe less head scratching at first sight.

DuBu

@GrecKo Yes, but unfortunately implicitHeight is a read-only property. (Probably only in the QML scope.)