Dynamically grow paragraph height

Hey all.

I’m working on a responsive prototype and experimenting with a concept that doesn’t rely on adaptive views (mostly). There are 2 different views. One for everything above 1118px and one for everything below 1118.

All of the ‘responsiveness’ comes from the 1118 and below view.

Here’s how I have it set up…

The size of the image elements on the page set to react to [[Window.width]] by a ratio of the image width

The elements stay grouped together by sticking to the bottom of the element above it.

The problem comes from the Paragraph widget. I can get it to resize easily on the x axis but it won’t resize on the y. It retains it’s original height and the text spills out of the container (Red stroke for reference).

Any gurus out there have an idea on how to make this work?

ResizeTest.rp (59.9 KB)

Preview

1 Like

Hi all,

mcvizual wrote in to our help desk for tips and we thought to share them here. When working with widget resizes, the text on the widget doesn’t automatically adjust to fit the widget’s new size. Depending on how you want the widget to adjust, you could try one of the following:

  1. As you resize the window to be smaller, you could use conditions OnWindowResize to check the width of the window and then use Set Rich Text to shrink the font size of the text; this should help to keep the text confined within the widget as it gets narrower (while retaining the same height) to prevent spillover.

  2. If you don’t mind the height of the widget increasing to accommodate the existing font size as the widget width shrinks, then you can use Set Size OnWindowResize to add a few pixels to the widget’s height (e.g. height = [[Widget.height+5]].

Hopefully that helps anyone with similar questions!

Thanks for posting here, @Alyssa_Axure. Always a pleasure working with you guys.

The only issue with your solution (and outside of the main intent of Axure) is that when pages are manually resized, the [[Widget.height+5]] added to the height on resize applies to growing and shrinking the page.

Ideally, it would be “[[Widget.height-5]]” when growing the page and [[Widget.height+5]] when shrinking it. I couldn’t figure out a way to make Axure realize the page was growing.

When you say, “page was growing” do you mean the height of the browser window or the total height of the page content? The height of the window is a built-in variable in Axure: [[Window.height]] The height of the page content is not directly available via variable like this, but can be easily derived if you know the bottom-most widget, such as a footer or hotspot placed at the bottom of your content. You can use a “Local Variable” in an “fx” expression to point to the last widget on your page and refer to its .bottom property, as in, [[LVAR1.bottom]].

See this example. You can resize your browser window manually to see the result, and resize the page content by clicking the “MAKE THE TEXT LONGER” button.
Window and Page Height.rp (69.0 KB)

The trick to getting the page content height dynamically is to have the bottom-most widget (“Footer” in my example) report its .bottom value whenever it is moved, so take a look at its OnMove event.

Thanks for asking, @mbc66.

I was talking about the page width and growing or shrinking the horizontal resolution to mimic responsiveness.

Hi mbc66,
I am wondering, how to make “see less” content, that push footer back (up). Please see my example: SEE M0RE-SEE LESS.rp (97.1 KB)

Thank you in advance,
Natalie

@bermanatalie

The easiest solution is to pull the widgets back up with you click “See Less”. Screenshot attached. I tested it in your prototype and it works fine.

SEE M0RE-SEE LESS-pullFooter.rp (97.1 KB)

1 Like

Thank you so much for quick reply!!!
It work fine, exactly as I wanted :slight_smile:
Natalie

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