Setting the size of an element by the height of an element which is populated by repeater data

advanced-prototyping
repeater-widget
#1

Hi all,

I’m currently building a timeline, where you have many elements in a collapsed state (imagine something like the Twitter timeline).
The elements of the timeline are built with the repeater widget. The repeater widget itself contains of a dynamic panel with two states, which represents the collapsed, and the expanded state. So far so good.

Now I want to change the height of an element within the expanded state element (a rectangle) based on its content, which is also loaded from a the repeater. The content element is a simple text-element, which loads a varying amount of text data from the repeater.

What I tried so far is to set the value of a new global variable “itemFrameHeight” to [[content.height]]. And onPanelChange (which is triggered by clicking a button) I set the size of the rectangle to [[itemFrameHeight]].

But somehow that doesn’t work. Does anyone have an idea, how I could set the hight of an element based on the hight of another element, which comes from a repeater?

Thanks a lot in advance.

#2

Hi @StefanSchmager,

Not sure if I understood well your issue but do you want to adapt the height of an element with its text?

If so you could set a Resize action on ItemLoad and use the number of characters (its length) to change its height:
image

Here a mockup with this behaviour:
Adapt_height.rp (55.3 KB)

Hope it will help you,
Best,

Messaging prototype issue
#3

Hi @PierreJ, thank you very much.
But I’m not sure if your approach would work, since the element should grow in terms of height, not width. So I thought I could use the height of the text element after it has been loaded from the repeater and add to the global variable.

I have added a short recording of what currently happens.
My aim is, that the border-box (grey) would grow depending on the text (blue).

screencast%202020-05-26%2019-14-52
screencast 2020-05-26 19-14-52.gif1306×492 4.03 MB

Does this make sense?
Best regards and thank you,
Stefan

#4

Did you try my mockup? Because it does grow on height.

The event is to resize the rectangle:
Width => don’t change it
Height => change it with the number of characters of the content

Here a second version that has more the look and feel of your mockup:
Adapt_height_V2.rp (58.6 KB)
image
image
image

PS:

Sadly Axure doesn’t seem to have “Fit to content” settings, so the text will overflow of the box, without changing its height. You could maybe find some javascript workaround to deal with it, but the trick with lenght works too.

#5

Hi @PierreJ,
you are right, I hadn’t checked your mockup before writing the reply. My sincere apologies.
Thanks a lot for your second mockup. Based on that, I was able to recreate the behaviour in my prototype. It required a lot of restructuring, but in the end, it worked.

Thank you very much again!
Best regards,
Stefan

closed #6

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