Text Area Scroll to Bottom

I have a log-style Text Area that I add text to.
How can I keep it permanently scrolled to the bottom?

Currently the text area just stays scrolled to the top of the content, whilst the scrollbar shrinks as more text is added to the (off-screen) bottom of the area.

Thanks in advance for suggestions…

If you are not directly inputting text into the text area widget, you can take advantage of the dynamic panel’s special scrolling behavior instead. Then whenever text is added you can use the “Scroll to Widget” and “Move” actions that target a placeholder widget at the bottom of the text. The placeholder widget can be moved to a Y value like [[LVAR1.bottom]] to ensure it moves with the text.


A couple of things to keep in mind with the above example is the dynamic panel should have Fit to Content turned off and vertical scrolling on. And the rectangle widget that you’re adding text to should have Fit to Text Height turned on.

image image

Text areas are form field widgets managed and styled by the browser and unfortunately, Axure RP doesn’t have any built in interactions to target this. I’ll be happy to submit this as a feature request for our product team to see if there are ways to implement form field specific attributes.

By using some interactions and manually manipulating the text and focus of the text area widget, you can force it to scroll to the bottom. It’s not the most elegant solution but it still works :slight_smile: To do this, you’ll need to fire a “Focus” and “Set Text” action twice. Automating this on page load was kind of tricky as it doesn’t play nice with the sequence. However, with the two interactions below, it’s able to work successfully!

image image

Here’s the project file if you want to test it out!Text Scroll To Bottom.rp (54.2 KB)

I’ve just tested this - and it doesn’t quite work properly.

Instead, weirdly, it doesn’t let you scroll completely to the top, once several extra lines are added - but I don’t see why that happens.