Item-start in ion-avatar not working

Ionic Framework ionic-v3
1

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…

global packages:

@ionic/cli-utils : 1.4.0
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.6
@ionic/cli-plugin-ionic-angular : 1.3.0
Ionic Framework                 : ionic-angular 3.1.1

System:

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.

2

You didn’t provide any links to what you actually mean in the docs, but if you refer to the app running inside the device on the right you can find the code here: https://github.com/ionic-team/ionic-preview-app

3

That does show that it compiles to how I was saying, the exact example I was talking about is… avatar list
That shows the layout I described, which is the same as on their main docs for avatar list, but when compiled on their docs it will show that the ion-avatar is before the div class=‘item-inner’ however whenever I run the exact same code and compile it the layout puts the ion-avatar inside the div class=‘item-inner’ which destroys the final look.

What I think is going on is the compiler/transpiler is ignoring the “item-start” attribute on the “” so it is putting the avatar inside the “item-inner” content, when it should be placing it before that, since it has the “item-start” attribute.
I was finally able to get it to work, kind of, by changing “item-start” to “item-left” It still put the avatar inside the “item-inner” div, but at least it was now on the left of the content and not on top of it.

4

No you aren’t, and therein lies the problem.

Latest is 3.3.0 at the time of writing, and the RTL stuff that changed item-left to item-start went in in 3.2.0.

2 Likes
5

Thank you, good find.
How can I update that? I have run

sudo npm install -g cordova ionic

And that is what it installed. I go to the website and that’s all it shows for how to install it.

6

Ionic CLI is not Ionic Framework.

Change the version number of ionic-angular in package.json and run npm install.