Conditional display of element messes up rendering in lists

Hi All

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:

The Stapler and Girona images are the same sizes however because there’s no banner, the Girona image is displaying shorter than it should be.

Any ideas how I can fix this?

Have you tried with without the use of the “Masonry layout”?

image

@Colin Yeah- it doesn’t make any difference- the frame is still truncated- it just shows the gap to the next row.

image

And if I make “New” always visible instead of sometimes visible it shows up just fine:

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 :slight_smile:

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 :slight_smile:

3 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.