Hi all! I am currently working with a screen where we are using instances of an embedded flex container-based view in a flex repeater. The intended functionality of the display is that the height of the instances in the flex repeater will stop growing vertically at a certain set point. I have attempted to use a combination of basis and shrink properties while grow is set to 0, as well as tried adjusting properties at different levels in the hierarchy, but it results in scrollbars being used instead of shrinking when the display shrinks. Any suggestions on how I can achieve the desired functionality? My customer would prefer that we avoid using advanced stylesheets for maintenance purposes.
Add maxHeight to props.elementStyle to cap the upper height of each instance, or try setting props.elementPosition to {grow: 0, shrink: 1, basis: auto}
This is a mistake on their part.
The stylesheet makes maintenance easier as the style is defined in only one place. It's the way of the web.
2 Likes
I attempted both methods, but with no success. maxHeight doesn't seem to be doing anything (and doesn't appear as an option in the property menu for props.elementStyle by default), and 0 1 auto is leading to mismatched sizes on the individual instances and scrollbars instead of shrinking.
Testing with props.elementStyle set to {minHeight: 10px, maxHeight: 30px} and props.elementPosition set to {grow: 0, shrink: 0, basis: auto} I can get larger instances (made larger by adjusting their text content) to size up until the maxHeight value.
I believe a lot of the min* / max* css options don't show up in that list, but they do work. gap also doesn't show in that list and I use it extensively across projects.