I can’t seem to figure out why my code is compiling differently than what the docs show. If you go to the docs and look at the “list” part, then the “Avatar List” it shows a very simple layout, even if you click on the “Doc Source” and go to the github page. The layout is extremely simple…
<ion-list> <ion-item> <ion-avatar item-start> <img... </ion-avatar> <h2>Words</h2> <p>more words</p> </ion-item> </ion-list>
I do exactly that, but the output is completely different. In the docs code, if you do “inspect element” the final output has the ion-avatar before the "div class=“item-inner”, but whenever I run ionic serve my ion-avatar is inside the “div class=item-inner” which makes the layout all messed up. Instead of my avatar being on the left in the list, my avatar is an entire line, then the h2 below that, then the p below that. It isn’t all in one line like the docs show.
I am using the newest version of everything, my ionic info is as follows…
@ionic/cli-utils : 1.4.0 Ionic CLI : 3.4.0
@ionic/app-scripts : 1.3.6 @ionic/cli-plugin-ionic-angular : 1.3.0 Ionic Framework : ionic-angular 3.1.1
Node : v6.10.3 OS : Linux 4.4 Xcode : not installed ios-deploy : not installed ios-sim : not installed npm : 3.10.10
Does anyone know why when compiled the ion-avatar is inside that div on mine, but in the docs page it is before that div and looks right? Please help, I am going nuts here trying to get the layout to look right, it looks so terrible right now. Thank you.