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

page-and-widget-styles

#1

I’m setting the value of a variable to equal a text entry field on submit. I then want to populate a text widget with that variable and have the container fit to the widget text. I’ve got that part working just fine. It’s the next bit I’m struggling with.
When the width of the text widget reaches a certain value, I want it to stop and force the text to wrap and letting the “fit to height” kick in.
Is this possible?


#2

Sounds tricky - can you upload what you have so we can have a look?


#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.


Resizing a shape to fit entered text
Prototyping a code editor with line numbering
Repeater does not resize some elements - bug?
#4

Thanks @josephxbrick! That’s exactly what I was trying to do.

I’ve verified that it works in RP 9 as well.


#5

Hi emceephoto!

Thanks for verifying that this works in Axure 9. Eventually I’ll upgrade to it. But a release that is mainly a user-interface upgrade with little else added isn’t quite enough for me to justify the $$$. Plus, I see commenters on the forums referencing bugs that don’t exist in Axure 8 that exist in Axure 9. Maybe when 9.1 comes out? :slight_smile:


closed #6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.