Dynamically Resize Individual Repeater Items Based on Text Length

[WalleyeUk]

I’m trying to create a horizontal toggle of three items. Each item has different text values in Column0.

Is there a way to:

[ol]
[li] Set the width of the repeater item to equal the length of the text that is stored in Column0
[/li][li] Have different widths for repeater items (so say the first item’s text takes up 50px, and the second item’s text take sup 100px, can I have Item 1 repeater width of 50px and Item 2 at 100px? Or do they all have to be the same width (I think this is likely). Given that, is there a way to set the repeater item to the longest text length in the set?
[/li][/ol]

Thanks!

[Vikramadhithan]

Hi WalleyeUk,
Please check the attached RP file. I hope it will be useful for you.

Thanks,
Vikram
repeaterVariableRowHeight.rp (81.1 KB)

[WalleyeUk]

Thanks very much Vikram!

I think your Axure Ninja skills significantly out weigh my own when it comes to the mathematical expression side of things (never was any good at Maths!!). If you have a moment, would you mind just explaining a little of what’s going on in here? Obviously I’ll need to adapt to work to dynamically changing the width rather than the height, but also because i’m really keen to learn how to improve this side of my prototyping

Thanks again!

[Vikramadhithan]

Hi WalleyeUk,
I have created sample for dynamic height based on input text length. Please check the attached RP file for your reference.
Default row height=50
I have added condition based on your dynamic insert text length
Text length (character) < 50
Default height (50) + 50 = 100

Text length (character) > 55
Default height (50) + 100 = 150

Thanks,
Vikram
DynamicRowHeight.rp (84 KB)

[WalleyeUk]

Hi Vikram

Thanks for this. However I’m trying to adjust a horizontal repeater and hence width, rather than height.

I have however fumbled my way through your original prototype and got some of it working. RP is attached. I’ve added mine as a new panel to the side of yours, changed height references to width and prefixed “CK_” to most things to make it clear what is what.

For this prototype, I will pre-define the text for each repeater item in Column0. I would like to dynamically set the value of “CK_RepeaterWidth” (a replacement for your “additionalRowHeight” column label) based on the total length (actually the pixels used) of the text within the repeater item.

Unlike a variable height, I also need to get the width of the text label inside the dynamic panel of the repeater item (in my version, labelled “CK_textDisplay”) to also expand along with the dynamic panel itself (I basically want to have the text to be on a single line with about 20px padding either side to the border of the dynamic panel).

Obviously you can resize a Dynamic Panel, but I guess some cleverness is needed to resize the text label element itself?

Thanks again for being so helpful, really appreciate it!
repeaterVariableWidth.rp (90.7 KB)

[Vikramadhithan]

Hi WalleyeUk,
Excellent! You require to alter the condition [[Item. CK_RepeaterWidth]] instead of [[Item. MyRepeaterWidth]]

Please refer the below screen shot and RP file.

Thanks,
Vikram
repeaterVariableWidth_fixed.rp (77 KB)

[WalleyeUk]

Ah shoot I originally had the column called MyRepeaterWidth, and then changed it to CK_RepeaterWidth to make it easier for you to reference, and forgot to update this condition.

I’ve corrected this now in the version below. However I still get the issue where the text does not expand in width. Here is what i see (where the panel expands, but the text label does not)

repeaterVariableWidth_v2.rp (90.4 KB)

[Vikramadhithan]

Hi WalleyeUk,
Everything is good. You need to check the checkbox auto fit width.
Please refer the below screen shot and RP file.

Thanks,
Vikram
repeaterVariableWidth_v2_fixed.rp (89.1 KB)

[WalleyeUk]

It’s always the simple things!!! What an idiot I am!

I guess then the only thing remaining before I have everything is how to set the width of the repeater item (CK_RepeaterWidth) based on the width of the text label (plus some padding)…

[thePsycho79]

The problem with doing that is that it cuts off the text for the minimum width box. Now, I realise this may well be placeholder to demo, but if text wrapping is required, you lose that.

I have been looking into a failsafe way of doing it using javascript but for one reason or another, it doesn’t seem to be working. But I would say that would be your way to go - to set the the state content div, the paragraph and .text divs as 100% width. I’ve tried using the OnItemLoad of the repeater and the OnPageLoad but neither seem to work.

[Anthony_Axure]

[Anthony_Axure]