I am working on a simple restaurant menu web app and I built my own very simple card component that contains an ion-item
with a conditional ion-thumbnail
(if the menuItem contains an imageUrl) and an ion-label
. This implementation came from the Ionic docs. For some reason, the ion-thumbnail
seems to load in late, causing the card to resize. I’ve attached 3 pictures below for the 3 different states I am seeing.
Card Without Image
Card While Image is Loading (using ion-skeleton-text
)
Image Loaded
You can see the height of the card in the first state is different from the 2nd two states. This is becoming an issue because I built a custom drawer component that utilizes the card components. The drawer calculates the height of the contents to know where to position buttons fixed at the bottom of the drawer, but since the ion-thumbnail
's are placed after the height calculation, the fixed buttons get pushed below the screen. I’ll attach a video of this as well. Is there a way I can ensure the thumbnail is loaded into the ion-item
before it is rendered? It doesn’t need to be loaded, just positioned so the height is calculated correctly. ThumbnailResize.mov - Google Drive
The only other option I can think of is a callback forcing height recalculation after the image loads, which I would like to avoid. Please let me know if you have any suggestions, thanks!