I have a perspective view set up as follows:
- View type is Flex Row. Within the root container is Embedded View 1
- Embedded View 1 is a Flex Column view type. Within this view I have two objects:
- A header label with a fixed basis, grow and shrink set to 0
- A flex column repeater with basis set to auto, grow and shrink set to 0, and elementPosition basis set to auto, grow and shrink set to 0
- The flex repeater embeds a series of 6 views. Each view starts as the same size, but contains an accordion-type object to expand and show more detail. Therefore, as more of the views embedded in the flex repeater are expanded, the height of the flex repeater grows
If I open too many of the accordions, the data starts to disappear off the bottom of the screen. I would like scroll bars to appear on the flex repeater only - meaning that all of the other objects on my main view stay put, and the header of Embedded View 1 stays put, and only the flex repeater scrolls up and down to achieve this.
I thought this would be achieved by setting the overflow settings as follows:
- Main view root container: visible
- Embedded View 1 (setting in main view): visible
- Embedded View 1 root container: visible
- Flex repeater: auto
However, it does not work with the settings I have in place - the embedded view just extends off the bottom of the view and does not display scroll bars.
I can make it work by setting the main view root container’s alignItems setting is to stretch, but that’s not what I want - it creates some visual effects that are less than ideal. I want that setting set to flex-start.
I can make it work by setting a maxHeight for Embedded View 1, but that means my design is no longer dynamic for screens of different sizes.
Is there another trick I can use to make it work the way I want?