A hover on repeater item (with a dynamic height)

[Karel]

I want to add a hover style to an item in a repeater (row in a list). However, as my items are dynamically filled with text and the height of each item is different (by a number of rows) I cannot use a simple box with a background and hover style as shown in this example https://8z98wy.axshare.com (it does not change the height based on text length … or rather, I don’t know how to do this).

I tried to wrap the repeater item in a Dynamic panel and selected “ Fit to content”. (Only this way the re-sizing of items works for me). However, even though the Dynamic panel has a background option (Fill), it does not offer an option to change it on Mouse Hover. (why???)

repeater hover style.rp (82.5 KB)

Does anybody know how to solve this???

Thanks

BTW, I have found this old forum (2014) but it does not solve the issue because of the dynamic height <<how-do-you-manage-hover-state-of-dynamic-panel-in-repeater/28079>>

[steven.wang]

@Karel I can feel your frustration, it would be sweet if Axure can support it natively.
i don’t know if there is a native way to handle it, but here is a solution using javascript.

repeater hover style.rp (85.6 KB)

[Karel]

@steven.wang GREAT!!! many thanks for your help
Yes, it would be great if this feature could be supported natively. What is the best way to highlight it to Axure people?

[steven.wang]

@Karel you can manually tag them in the post (so i just type @ and one letter, then it will give you a list of users, and the ones with a suffix “Axure” are from Axure team) @Alyssa_Axure

but since this is a feature request, they usually suggest you sending an email to support@axure.com

[Alyssa_Axure]

Yeah, for feature requests/general feedback you can send those straight to support@axure.com, which ensures that they’re seen and passed to the product team since that’s the support team’s primary channel. Feel free to also send any urgent or confidential issues that way as well, and bugs!

As far as how to simulate hovering rows, this should be doable within Axure RP if you leverage mouseover interaction styles or the Mouse Enter interaction to trigger mouseover fill colors or selected states on the repeater row’s background fill widget.

Highlighting selected row in Repeater solution

Wrap the row in a dynamic panel. Check the Panels “trigger Mouse Interactions” Checkbox. Make sure, that the “isolate Selection Groups” Checkbox of the Repeater is checked off. Add the dynamic panel(s) to a selection group. OnClick the dynamic Panel setSelected(this). Now add the requested styles to the items inside the dynamic panel inside the repeater item. If you want to have fancy stuff like appearance changes you can add widgets with normal -> opacity = 0, selected -> opacity = 100… or …

That said, it looks like the Mouse Enter/mouseover triggers aren’t working correctly at the moment (they require a click) so I’ll file a ticket for QA to take a look, but it looks like the javascript solution above does the trick for you!

[steven.wang]

@Alyssa_Axure thanks for the reply! just to share what i’ve found

so Karel’s project has a repeater with dynamic content wrapped in a DP, I find that the DP’s height is always its initial height regardless of whether the dynamic content has forced to expand the area. So it’s not available to set the hovering background’s size using Set Size = DP’s height

[system]

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