CODEWITHSUNDEEP
qtfontsqmlfont-size
T.Poe
T.Poe

Reputation: 2079

QML: Autoresize the TextInput

Text type has this nice feature fontSizeMode, which tries to fit the font size to the actual size of the visual component. So that when I set the font size to 20 and I resize the window so this font size is too big, it automatically lowers the font size. 

Text {
          text: qsTr("Text")
          font.pointSize: 20
          fontSizeMode: Text.Fit
     }

Now I wanted to use this functionality with the TextInput type, but there is no fontSizeMode available. So my question is, how can I achieve the same functionality with TextInput? Now, when the font size is set and I downsize the window, the string in the TextInput is cut in half like this:

enter image description here

Upvotes: 0

Views: 2181

Answers (2)

T.Poe
T.Poe

Reputation: 2079

I sticked with this solution. Bind the font.pixelSize property to the parent height. Although I'm not sure if it is 100% correct, it does exactly what I want. If there is some problem about it, please make me know.

 Text {
      text: qsTr("Text")
      font.pixelSize: 0.1 * parent.height
 }

Upvotes: 0

dtech
dtech

Reputation: 49289

You can scale the element down to constrain it to a specific width:

  Rectangle {
    width: 100
    height: 50
    color: "red"
    TextInput {
      anchors.centerIn: parent
      font.pointSize: 20
      text: "test"
      scale: Math.min(1, parent.width / contentWidth)
      Rectangle {
        color: "white"
        anchors.fill: parent
        z: -1
      }
    }
  }

Upvotes: 1

Related Questions