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. [Solved]Auto-resize text based on parent component size
Forum Update on Monday, May 27th 2025

[Solved]Auto-resize text based on parent component size

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 3 Posters 3.5k Views
  • 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.
  • E Offline
    E Offline
    ealione
    wrote on 13 Feb 2015, 12:24 last edited by
    #1

    Hi everyone,

    I was wondering how can one autoresize some text.
    What I have is just a simple window with a sentence of varying length in it. As I resize the window I want the font size to increase or decrease accordingly (something that to an extend I did) but also if possible, I want it to behave a little bit more intelligently. In the sense that the text should not get bigger and bigger indefinitely but at some point reach an upper limit and stop. Same rules should apply for when it is getting smaller (for example when should it wrap and when should it just get smaller).

    What I am describing here is purely my own imagination running ahead of my programming skills, so it may not even be possible, in any case any recommendations are welcomed.

    1 Reply Last reply
    0
    • P Offline
      P Offline
      p3c0
      Moderators
      wrote on 14 Feb 2015, 09:20 last edited by
      #2

      Hi,

      You can bind an expression to font.PointSize which will return the new point size depending upon the Window's dimensions. Something like this
      @
      Rectangle {
      id: rect
      width: 400
      height: 400

      Text {
          anchors.centerIn: parent
          text: "Qt is Cool"
          font.pointSize: rect.width > 500 ? rect.width/10 : 40
      }
      

      }
      @

      You could add threshold condition to above expression to control it.

      157

      1 Reply Last reply
      0
      • D Offline
        D Offline
        denexter
        wrote on 14 Feb 2015, 13:32 last edited by
        #3

        The fontSizeMode (http://doc.qt.io/qt-5/qml-qtquick-text.html#fontSizeMode-prop) property of Text will do this for you.
        font.pixelSize will set the maximum size, and minimumPixel size the minimum (or font.pointSize, and minimumPointSize if you prefer.

        Then set the Text item dimensions: 'anchors.fill: parent' if you just want to fit to the parent, enable wrapping and eliding as you please and it will be taken care of.

        1 Reply Last reply
        0

        1/3

        13 Feb 2015, 12:24

        • Login

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