Rendering `ion-item`'s Content
Leonel Elimpe
by Leonel Elimpe
~1 min read


  • Ionic


If you’ve ever struggled with getting “CONTENT” above to render “predictable”, I just found out if you wrap it in ion-row > ion-col, it will do just that.

    <ion-row style="width: 100%">
            <div>Some text</div>


By default we are limited to something like below when using ion-item .

    <ion-avatar slot="start">...</ion-avatar>

I’ve personally struggled with getting more complex components properly rendered inside an ion-item, and have had to resort to using a card sometimes. Wrapping the content of ion-item inside ion-row > ion-col as in the first example did the trick for me, I hope it does for you too.