Expand height of repeater row in table based on content

repeater-widget

#1

Hey, I’m new. I’ve been having a lot of fun using the repeater for prototyping complex tables. I’ve read a little bit about hacking my way through this one, but I can’t figure it out for my context.

I have this repeater element creating a traditional table. I’d like the content of the table to make the rows larger. Any help?
Repeater-codyiddings.rp (74.7 KB)


Get height of widget
#2

Hi all,

Cody and I worked on this via the support channel, and we ended up uncovering some limitations in implementing this using a Repeater. In short, prototyping this sort of accordion push/pull behavior with Repeater Items can be a bit tenuous; and, for now, we’d want to recommend simulating this using a standard accordion setup using Dynamic Panels.

We’re looking into making this Repeater interaction easier and more straightforward to implement, in the next major release. As for the current situation, though, Jonathan posted a nice wrap-up about the topic, here:

Accordion Repeater problem

Thanks; HTH!
Alex


#3

I am attempting to create message wall (think Facebook) that needs dynamically controlled height. It’s proving to be quite the task within Axure. Would you recommend using the solution outlined above? My preference would be to avoid page bloat / overhead from the resulting dynamic panels, but will settle if it is the only viable solution.

I am aware of the algorithmic solution based on content length. However, multiple variables contribute to the height of my results.

I feel like there is a more eloquent solution to my issue, any ideas or suggestions?

PS: Any ETA on the next major release?


AUTO-FIT widgets based on variable text length
#4

Hi vladenstock - this might work for you.

It’s a variable-height repeater that uses values in a repeater column to increase the row height from its “minimum” (authored) height by a number of pixels. In other words, you’d set the content of your repeater at what you consider to be the minimum height, and this column specifies how much taller you want a particular row above that minimum.

Here is sample output, whose authored height is 100.

Here are the values in the dataset that produced it:


If you know ahead of time how tall each row is going to be (e.g., a static prototype), you would just enter the values into the dataset ahead-of-time, like above.

If you are adding rows, just specify the additional height when you add it (or 0 if it’s at authored height).

Note that there is a dynamic panel outside of the repeater that contains the shapes whose text I’m using as “variables.” Don’t delete this.

This repeater has its vertical spacing set to 1. If you change that, make sure you update this line of code (in the OnItemLoad handler) to reflect the change:


Also, if you need to get the height of the repeater, you won’t be able to get it using Repeater.height, since the rows are escaping the bounds of it. One of the “variables” is a shape called “repeaterHeight,” whose text value represents the height.

Be sure to place all of your repeater content in the “row” panel in the repeater.

Here is the file:

repeaterVariableRowHeight.rp (81 KB)

Hope this suits your needs!

  • Joseph

#5

Ty this worked perfectly!


#6

Hi Alex, I’m needing to solve a similar problem to what @vladenstock needed. Have there been any updates to how this can be done since the replies in 2015?


#7

Do you know if there is an updated way to do this in Axure 8?


#8

Hi!

The previous post will probably still work if you turn off “Fit to Content in HTML” of the repeater. However, there’s a much better to do it in Axure 8 with “Fit to Content in HTML” set ON. (The default setting in 8.)

Here’s the file: repeater_row_height.rp (48.0 KB)


Tags in select box, or Chips/badges with input
#9

Thanks so much for your response on this @josephxbrick. This really helped me with the project I’m working on. You are awesome!