Skip to main content
jonnubroth
Participating Frequently
June 16, 2018
Answered

Filling a textField dynamically either by scale or font size.

  • June 16, 2018
  • 1 reply
  • 2328 views

Hello all,

I've been attempting to have text fill a textField width responsively. Here is my code:

while(textField.textWidth < textField.width)

{

    tf.size += 1;

    textField.setTextFormat(tf);

}

However, this causes the text to be huge! Even though the textWidth and width are similar, the text is huge and only shows one letter in the field. I've tried scaling with textField.scaleX, but then the textWidth doesn't change. Very confusing and any help would be greatly appreciated!

This topic has been closed for replies.
Correct answer Colin Holgate

I'm trying to do the opposite! I have a fixed textField size and want the text inside to fill the textField proportionally. When I increase the textWidth to match the textField size it is wildly too big. Thank you for the information so far!


When you set the text of a textfield you can check the textHeight, and from that you know if the text is taking up two lines or one line. You then make function that keeps on increasing or decreasing the font size, until either there is now one line, or there is now two lines (depending on whether you're increasing or decreasing). When increasing, as soon as there is two lines you would then set the size to the previous attempt. When decreasing, as soon as there is one line you leave it at that size.

To decide whether to increase or decrease, just set the text at the current font size, if you get more than one line, do the decreasing approach. If you immediately get one line, do the increasing approach.

1 reply

JoãoCésar17023019
Community Expert
Community Expert
June 16, 2018

Hi.

Have you tried setting your text field to auto size and the behavior to single line or multiline without wrap?

Regarding the autoSize, it would be something like this:

import flash.text.TextFieldAutoSize;

txt.autoSize = TextFieldAutoSize.LEFT;

txt.text = "Your long text here.";

Regards,

JC

jonnubroth
Participating Frequently
June 16, 2018

The textWidth property doesn't change and I see no change of the text when I use the TextFieldAutoSize. Does it autoSize the textField or the actual text?

JoãoCésar17023019
Community Expert
Community Expert
June 16, 2018

The autoSize property makes the text field change size according to the length of the text (string).