Set a variable width & height text box to have a max width

Axure RP 9
3

Hi!

This can be done with some javascript as shown in the sample file below. Notes:

  • Hitting enter or causing the field to lose focus will trigger the javascript
  • The javascript (in OnLostFocus) expects the field to be named ‘entryField’ and the widget the text ends up in to be named ‘textTarget’. If you want the names to be different for whatever reason, edit the javascript where the comments tell you to.
  • There are two variables in the javascript that need to match the padding style that you assign to textTarget:
    – h_padding: set this to the sum of the left and right padding
    – v_padding: set this to the sum of the top and bottom padding
  • You also need to set the maxWidth variable to your desired maximum width
  • Setting the text is ignored if the field is blank. Let me know if that’s not what you want
  • Lastly, the textTarget widget must initially have text in it to make this work, so put a space into it if you want it to appear blank.

Disclaimer: I created this in Axure 8. Let me know if you have issues in Axure 9.

Live sample

File: set_widget_to_size_of_text.rp (48.5 KB)

[Edit] Oh - one more thing. Make sure that textTarget is NOT set to size itself to its text.

1 Like