How to resize a shape being filled with content

I want to use a repeater widget that contains the following in this order from top to bottom:
[ol]
[li]An image[/li][li]A title[/li][li]A text box[/li][li]A button[/li][/ol]
Now the text box (or shape) has a border around it with “Auto Fit Height” turned on. Unfortunately when filled with text the shape (background and border) does not re-size, but all the text does.

This is also the case with the title and the button shapes.

My plan was to use the “Repeater Dataset” for all 4 content areas, the text box would re-size according to the text filling it, and I would use the action "Move Button by (.[[LVAR1.Height]]-original text box height) where LVAR1 = text box widget.

So I’m aware that a Dynamic Panel can be re-sized, however when I use the LVAR1.Height it comes back with the height of the text box(background and border) as opposed to the text itself.

Yes I could limit the size of the Dynamic Panel by using scrollable areas but is not my ideal situation.

I need to somehow capture the actual height of the text filling the shape so I can move the button accordingly, unless there is another way to do this.

Any advice would be appreciated.

So the latest development I ended up trying to use dynamic panels and the length string function to see if I could create an acceptable size for the background and border in two separate dynamic panels.

Example:
40 is the approximate character length I chose for each line. 16 represents the height between text baselines. 400 and 300 are just random numbers chosen so it’s easy to select each dynamic panel with the mouse.

Set size of background to 400 x [[LVAR1.length/40*16]], border 380 x [[LVAR1.height]]

As anyone reading this probably already knows this did not return results that were helpful.

However now for some unknown reason after removing all the dynamic panels the text box shape has the border fitting around the content in the project file (.rp) but does not extend the green translucent border of the repeater widget. It also does not appear this way when going to Publish > Preview.

Probably a glitch but will update with further developments.

1 Like

Hi josh_db,
Why you did not use a text area instead of the textbox.

Thanks,
Vikram

A couple reasons for not using a “Text Area”:
[ol]
[li]There are less customizable options available for a “Text Area” versus a “Heading”, “Label” etc.
[/li][li]A dynamic panel with the vertical scrollbar turned on looks exactly the same, but with more customizable options.
[/li][li]A text area can be resized in the HTML preview, which is a function I don’t want.
[/li][li]A text area does not resize based on the content within it. (which was what I was trying to do)
[/li][/ol]

you will not be able to resize a styled rectangle by its content in axure rp7.

all the stying (background, shape, border) is an image rendered at the export from axure to the axure html prototype. all changes to the content (text) of the widget can not update the image in the background.

of course there are workarounds but finally you can’t achieve your goal without hacking axure. the easiest way is not to use the styling in axure but to apply custom css to the text-widget. this approach does not solve the height and positon-problem.

1 Like

Thanks Gregor,

I was hoping there might be another way to enable Auto Fit Height through functions or variables, or even return wrapped text height, or the number of lines of text that are wrapped.

Hi Josh_db,

Thanks for starting this thread. You’re definitely not alone on this one; I think many others would like to see this sort of feature as well–to be able to dynamically resize any widget–not just Dynamic Panels. I’ve gone ahead and submitted this to our product team, nonetheless, and we’ll continue to work on the issues behind pushing out this sort of feature. Thanks again for posting!

Alex

1 Like

Has there been any progress on this topic?

Not yet; this topic was discussed a bit over in this thread, but at the moment in Axure RP 8 setting a widget to autofit width does not dynamically resize it to fit changing text lengths in the browser. I’ll let the product team know that there’s ongoing interest for this.

1 Like

I’ve been coming up against this same issue. Have spent quite a bit of time restructuring a prototype to use dynamic panels with ‘Fit to Content’ to allow 4 vertically stacked sections to adjust appropriately in layout in response to the amount of text entered in by the user.

Is frustrating to find now that the underlying size of a shape remains the same, regardless of the size of text that is displayed on it.

Consider this a +1 vote to “please please” make this a feature in future!

Thanks :slight_smile:

2 Likes

If you want to set the size of widget based on content length, you can use the “Widgets > Set Size” case.

For the height input use the following function:

[[(Item.columnName.length/30).toFixed(0)*50]]

  • Item.columnName.length - is the text lenght
  • 30 - is the approximate number of characters that fit the background width. More than 30 characters and the text will wrap.
  • toFixed(0) - is to round the result of lenght/30 so that it looks like 1 or 2, instead of 1.564 or similar.
  • 50 - is the height of the background
1 Like

Many beganers are waiting for solveing this issue.

Hi all–Thanks for all the feedback! We’re no longer taking feedback and feature requests via the forum after our switch to a Q&A platform, so we’re closing this thread. All of the feedback from this thread has been filed with the product team. If you have any feedback or feature requests to submit going forward, please send those directly to us via email to support@axure.com. Thank you!