Dynamically resizing a Label within a Scrollview?

Question

Let's say you have a setup like the following:

ScrollView:
   size_hint: (1, 0.5)

   Label:
      size_hint: (1, None)

Initially, the Label has no content/text. If I understand correctly, when the objects are created, the Label's height is None.

When the app is run, the Label's text property is set to multiple lines of text, which should push the content of the Label outside the boundaries of the ScrollView. However, for scrolling to happen, it seems that the Label's y dimension/height has to be dynamically resized.

What is the best way to dynamically resize the height of the Label in accordance with the Label's new content such that a scrolling action can occur?

Answer 1

The actual text is displayed in a Rectangle whose size is not coupled to the Label size by default. When the amount of text is large, this grows larger and can exceed the Label bounds, but does not resize the label.

The relevant property controlling the real size of the displayed text is Label.text_size. To get the behaviour you want, you can simply do:

ScrollView:
   size_hint: (1, 0.5)

   Label:
      size_hint: (1, None)
      height: self.text_size[1]

This binds the height of the label to track the height of the displayed text, and so should give you the behaviour you want.

As a side note, it's often useful to change or watch text_size. For instance, to make the text wrap at the edges of the Label rather than relying on manual newlines, you can set text_size: self.size which means the text will be automatically wrapped if its width would exceed the label width. This is also important if working with halign or valign, which control the text position within its texture and not within the label itself - those properties will have no visible effect unless you manually set text_size to (again) something larger than the space the text actually takes up.

Edit: As per your comments below, here's an example of a Label in one of my apps, which grows vertically if the length of text increases (so the user can scroll), but also automatically wraps text when its width is greater than the label width. It seems I actually did this by putting the Label in a GridLayout, which I vaguely remember was important for some reason.

GridLayout:
    cols: 1
    spacing: 10
    size_hint_y: None
    height: thetb.texture_size[1]

    Label:
        id: thetb
        text: 'whatever'
        text_size: self.width, None
        size_hint: (1, None)
        size: self.parent.width, self.texture_size[1]

You can see I use text_size to control the text boundingbox (so it wraps at the label edges), but bind the GridLayout height to really track the texture_size height. The GridLayout is placed in the ScrollView, and I get exactly the behaviour I think you want.