I have a 5x5 grid of icons in a Container, with each icon set to 20% width and allowed to wrap, so it shows at 5x5 across various devices, and that works fine. The icons are generated in a repeat that’s based on a 25-element object, so I can pass parameters to each that they can then pass to a function triggered by a tap.
It looks like:
However, as soon as I attach any function to the ComponentTap event, the UI changes to this:
Does making it tappable change the UI somehow? In the “Style” tab, none of the styles seem to have changed. It would be awesome if you had some sort of “Computed styles” inspector or an “inherited classes” feature, so I could see what’s going on.
Any ideas why the icons are shifting like that, or how I can prevent it or work around it?
I figured part of it out - it looks like as soon as the Icon gets a Tap function, using a % in the “width” property in the Style panel suddenly means a % of the width of the icon (compared to its normal width) rather than a % of the width of the container.
Which, I guess would be okay, but now the icons don’t show up at all on an iPad…the entire section is just blank, but it shows up properly on Android phone (both using the Preview app - standard and Legend on iPad.)
Found a solution - looks like it’s related to Cells in a Row having special characteristics (perhaps not handling flexbox-style children very well.) So, I put a Container in the cell, then another container around the repeating icon, and the wrapping and display then worked properly, and the icon Containers seem to behave well with the parent Container…