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
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!