Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to auto size font on TextInput or TextField?
Forum Updated to NodeBB v4.3 + New Features

How to auto size font on TextInput or TextField?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 1 Posters 274 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • F Offline
    F Offline
    filipdns
    wrote on last edited by filipdns
    #1

    Hello,

    using TextInput in customized Combocox, I want the text adjusted following content.

    Original code is:

    Rectangle{
            width:control.width-control.indicator.width
            height:control.height
            anchors.left:control.left
            color:"transparent"
            border.width:1
            border.color:"black"
            radius: 2
            clip: true
            TextInput {
                id:textInputItem
                anchors.fill:parent
                focus: true
                activeFocusOnPress: true
                activeFocusOnTab: true
                padding : 5
                rightPadding: 5
                color: "black"
                leftPadding: 5
                selectByMouse: true
                text: control.displayText
                font.pixelSize:20
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
        }
    

    I tryed many solution like onTextChanged: {scale= Math.min(1, width/contentWidth)} or
    onTextChanged: {font.pixelSize= Math.min(1, width/contentWidth)} but the size not change all the time, don't know why and scale change text size but also text width, then all text is not visible, that not solving the problem...

    Could you help me?

    Thanks a lot

    F 1 Reply Last reply
    0
    • F filipdns

      Hello,

      using TextInput in customized Combocox, I want the text adjusted following content.

      Original code is:

      Rectangle{
              width:control.width-control.indicator.width
              height:control.height
              anchors.left:control.left
              color:"transparent"
              border.width:1
              border.color:"black"
              radius: 2
              clip: true
              TextInput {
                  id:textInputItem
                  anchors.fill:parent
                  focus: true
                  activeFocusOnPress: true
                  activeFocusOnTab: true
                  padding : 5
                  rightPadding: 5
                  color: "black"
                  leftPadding: 5
                  selectByMouse: true
                  text: control.displayText
                  font.pixelSize:20
                  verticalAlignment: Text.AlignVCenter
                  horizontalAlignment: Text.AlignHCenter
              }
          }
      

      I tryed many solution like onTextChanged: {scale= Math.min(1, width/contentWidth)} or
      onTextChanged: {font.pixelSize= Math.min(1, width/contentWidth)} but the size not change all the time, don't know why and scale change text size but also text width, then all text is not visible, that not solving the problem...

      Could you help me?

      Thanks a lot

      F Offline
      F Offline
      filipdns
      wrote on last edited by
      #2

      @filipdns here is what I did waiting better solution...

      FontMetrics  {
                  id: textMetrics
                  font.pixelSize:20
              }
              TextInput {
                  id:textInputItem
                  anchors.fill:parent
                  focus: true
                  activeFocusOnPress: true
                  activeFocusOnTab: true
                  padding : 5
                  rightPadding: 5
                  color: "black"
                  leftPadding: 5
                  selectByMouse: true
                  text: control.displayText
                  font.pixelSize:20
                  verticalAlignment: Text.AlignVCenter
                  horizontalAlignment: Text.AlignHCenter
                  onTextChanged: { font.pixelSize=20*Math.min(1,width/(textMetrics.advanceWidth(text)*1.4));textMetrics.font.pixelSize=font.pixelSize}
              }
      
      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved