The product image is displayed in three columns in the Custom list.
Another image（40px × 40px,PNG） with the “Sometimes Visible” setting (displayed when Current Product’s isSold is yes) is placed in the upper left corner of the product image using the Image component.
If Sometimes Visible is true and the image in the upper left corner is displayed, the layout is normally displayed neatly one-to-one.
However, when Sometimes Visible is false and the top left image is not visible, the layout is broken as shown in the attached image.
I have tried various trial and error methods, such as making the 1:1 (120px x 120px) product image, product name, and sales price text components in one Group, and the image in the upper left corner in another Group, but none of them worked.
If anyone has any tips on how to solve this problem, I would appreciate your advice!
Thank you in advance!
Adalo layouts could be very cumbersome and unpredictable. In this case I believe Adalo thinks there is no image on the top - why should it keep the empty space? And then it resizes the underlying image.
One of the possible workarounds is to put another object (e.g. transparent rectangle) of the same dimension size near the conditionally-visible image. And make this object conditionally visible with the opposite condition. So when the product_sold = TRUE, you will display the image; when product_sold=FALSE, you will display transparent rectangle. It should be the same height as you experience problems with height, but I believe that you can make it 1px width.
With this the space should be always occupied and the problem should be solved.
You need to get the objects aligned left or right.
Waiting for a ‘snap’ in the editor, or choose alight to left and then right when selecting two objects (the container and the sold image, then the container and the blank image/rectangle).
It can be painful.
There is another way to approach this without visibility. Store a transparent png image in the product table as a text URL and change it to the sold png when the product is sold. Maybe you don’t even need the blank image in the first instance. Try it out and see what works., let us know.
I see that you’re using the “mobile only” app layout settings. So align left / align right / align center options are not available. You can’t change that option after you create the app.
But this is not a big issue. In this case, “layout” means how you position the elements on the screen. I have created a video with the explanation how you can solve your issue: https://youtu.be/Bu9VhC4STKc
A side note: I would not advise to put items “fixed to top” inside a list, this may result in strange consequences.
