# Accordioning views in Flex Repeater

**URL:** <https://forum.inductiveautomation.com/t/accordioning-views-in-flex-repeater/31418>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 20, 2020, 3:26pm UTC](https://forum.inductiveautomation.com/t/accordioning-views-in-flex-repeater/31418 "2020-01-20T15:26:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dan\_Bridgeman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dan_bridgeman/32/3610_2.png) [@Dan\_Bridgeman](https://forum.inductiveautomation.com/u/Dan_Bridgeman)\
**Post date:** [January 20, 2020, 3:26pm UTC](https://forum.inductiveautomation.com/t/accordioning-views-in-flex-repeater/31418/1 "2020-01-20T15:26:01Z")

</div>

I am trying to make a page which shows multiple instances of a view stacked on top of each other, and able to dynamically accordion each instance when clicked. Because the number of instances depends on user input, a Flex Repeater with a bound instances property seems like a natural fit. But I’m finding that I can’t control the size each instance takes up in the parent view.

The view in the repeater has a header and a body; when you click the header, you toggle the display of the body. I would expect that when the body of the first instance disappears, the second instance would move up the screen and be directly below the first instance’s header. Here’s a picture of how I was able to get it to look in [ASP.NET](http://ASP.NET), using bootstrap components and javascript.

![Capture](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/1a65a6dd832b27ca7197e0a3457cf36bb8dddb9b.png)

Instead, the second instance stays right where it is, with the undisplayed portion of the first instance taking up the space it would have if it were being displayed.

![Capture](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/55d8192fed19fa8249333b9de87ed2e21338f8cb.png)

I found a post on the forum ([[Question] Collapsing and Expanding views in perspective](http://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829)) about manually coding the accordioning behavior by modifying a view’s basis when part of it is hidden, but that solution doesn’t appear to be available to the Flex Repeater. Even if I give each instance its own basis property, I can’t bind that to the basis of the instance so it updates when it changes. Or at least I don’t see a way to do so.

Is there a simpler way to get the effect I’m going for here? And if not, is there some way that I can make instances inside a Flex Repeater dynamically update their basis based on the properties of the view they contain?

---

<div class="post-metadata">

**Author:** ![Dan\_Bridgeman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dan_bridgeman/32/3610_2.png) [@Dan\_Bridgeman](https://forum.inductiveautomation.com/u/Dan_Bridgeman)\
**Post date:** [January 20, 2020, 7:27pm UTC](https://forum.inductiveautomation.com/t/accordioning-views-in-flex-repeater/31418/2 "2020-01-20T19:27:15Z")

</div>

A co-worker and I just spent a little more time on this, and found the solution: I had to set the Flex Repeater’s useDefaultViewHeight property to true, and set the height property of the collapsible element to “auto”.

I’ve come across this a couple of times, where properties like basis or height are documented as taking an integer, and the designer gives you a warning if you use a string instead of the expected integer, but it works perfectly well with the right string, like “auto”. Am I missing the place where these cases are documented?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 21, 2020, 4:34pm UTC](https://forum.inductiveautomation.com/t/accordioning-views-in-flex-repeater/31418/3 "2020-01-21T16:34:33Z")

</div>

> [@Dan\_Bridgeman](#):
>
> Am I missing the place where these cases are documented?

No, it's just a known (low-priority) bug on our side that they're designated as strictly numeric, when other properties (such as `auto`) clearly work. For now, safe to ignore, and expect those warnings to disappear in some future version once we fix the pattern matching.

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [April 9, 2023, 10:19am UTC](https://forum.inductiveautomation.com/t/accordioning-views-in-flex-repeater/31418/4 "2023-04-09T10:19:01Z")

</div>

I have encountered similar issue.

But to resolve it, I have to set "useDefaultViewHeight" to false.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/336b4cafdfc2f3ae9ca5a05e6a414d755e52aea8.png)
