I’ve got a typical shopping app and on the list of items I display a banner over the item image showing whether the item is “New” or “Sold” etc. That banner shows conditionally based on a status field against the item in the collection. All well and good.
However, I’ve noticed when no banner is shown the item image gets cut short so making the entire “cell” the wrong size, messing up the alignment of the row. See the attached image:
My second suggestion here to try and make this work is that you could duplicate that same “New” group (shape and text), set the stylign to be completely transparent so that it is there but not visible and then create the opposite visibility rules on it. So that it would be present on the cards that the “New” is not. Therefore balancing out the design and hopefully aligning them.
Alternatively, my best suggestion would be to drop that “New” label to underneath the picture so that this problem woudn’t be there anymore by default
I tried that but unfortunately, every conditionally displayed group cuts the size of the underlying image so by the time you have “New” and “New” (hidden) and then “VIrtual Item” and “Virtual Item” (hidden) the underlying image is about half the size it’s supposed to be!
Actually it still affects the cell frame so things get out of alignment anyway. That said that’s what I’ve gone with and just used the masonry option to fill in the gaps. It’s not as pretty as the original plan though!
We have a lot of work still to do to get these kind of things right. Sorry for the problems you have faced, we do pay attention to this and we will solve them eventually
