bug: stacked labels do not play nice with item-right

[brandyscarney]

They do not like each other...

[schallm]

Here is another example of item-right not working. I want the Map button on the right side of the button. It worked fine in alpha.49.

<ion-content>
  <ion-list>
    <button ion-item *ngFor="#item of items" (click)="itemTapped($event, item)">
      <ion-icon [name]="item.icon" item-left></ion-icon>
      <h2>
        {{item.title}}
      </h2>
      <h3>
        {{item.note}}
      </h3>
      <button primary clear item-right (click)="showMapTapped($event, item)">
        <ion-icon name="navigate"></ion-icon>
        Map
      </button>      
    </button>
  </ion-list>
</ion-content>

[brandyscarney]

Will be fixed in next release beta.3

@schallm Your markup is working for me in the latest. Please create a new issue if it isn't since this is not related to the labels. Thanks!

[gigocabrera]

@brandyscarney Wouldn't it make sense to place the right icons in the middle of the <ion-item> (vertically)? Just like the icon on the left.

Take the markup below using an arrow-forward ionicon. It just doesn't look right to see the icon on the bottom right corner. I guess one solution would be to override the CSS style?

<ion-item>
      <ion-icon name="leaf" item-left primary></ion-icon>
      <ion-label floating primary>First Name</ion-label>
      <ion-input type="text"></ion-input>
      <ion-icon name="arrow-forward" item-right primary></ion-icon>
</ion-item> 

BTW, thanks for this fix!!!

[brandyscarney]

@gigocabrera You're right. For some reason I thought the icons were along the bottom in iOS but I just looked at the contacts app and they are vertically centered. Do you mind opening an issue for this so I can implement it separately? I'm worried people may want the icons at the bottom so I'll have to come up with a solution to both.

[gigocabrera]

@brandyscarney Done! here's the new issue

#5731

Again, thank you for all you do to make this awesome!!!

[brandyscarney]

Thank you! 😄

[benjaminu]

Hi,

I still seem to be experiencing this problem.

Here is my code:

<ion-content padding>
    <h2 text-center>Select your favourite quote</h2>

    <ion-list>
        <button ion-item *ngFor="let quoteCollection of quoteCollections">
            <ion-icon [name]="quoteCollection.icon" item-left></ion-icon>
            <h3 text-capitalize>{{ quoteCollection.category }}</h3>
            <p>{{ quoteCollection.quotes.length }} Quotes</p>
        </button>
    </ion-list>
</ion-content>

Here is the output.

Here is my ionic info output.

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.8.6 
ios-sim version: 3.1.1 
OS: OS X Yosemite
Node Version: v7.5.0
Xcode version: Xcode 7.2.1 Build version 7C1002

Please advise.

Sadly, my ion-list top and bottom borders are not even showing up - not sure if it is related.

Thanks.

[brandyscarney]

@benjaminu Which environment is this in? Are you running this in a browser?

[benjaminu]

@brandyscarney: Yup. In a browser.

[brandyscarney]

@benjaminu Which browser?

[benjaminu]

Firefox 51.0.1 Best regards, Benjamin

…

On 10 Mar 2017 20:54, "Brandy Carney" ***@***.***> wrote: @benjaminu <https://github.com/benjaminu> Which browser? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5319 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABI2B0h6YPhvj_EyFYeQ2VnIYOG03Rybks5rkbh1gaJpZM4HSkcb> .

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.