Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Ionic v4] (ion-item-option + routerlink) > ion-icon => icon displays too low #17402

Closed
IQbrod opened this issue Feb 6, 2019 · 3 comments

Comments

2 participants
@IQbrod
Copy link

commented Feb 6, 2019

Ionic info:

   ionic (Ionic CLI)             : 4.8.0
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v8.12.0
   npm    : 6.4.1
   OS     : Linux 4.15

Bug Report

Ionic version:
[x] 4.8.0

Current behavior:
The icon misaligns and is displayed too low when an ion-item-option is used with a routerLink

Expected behavior:
Aligned icons

Steps to reproduce:
1 - Run a sample of code using the related code
2 - Slide the item using the routerLink

Related code:

<ion-content>
  <ion-list no-border #slidingList>

    <ion-list-header>
      TODOLIST
    </ion-list-header>
    
    <ion-item-sliding *ngFor="let tdl of todolists">

      <ion-item [routerLink]="'/list-items/'+ tdl.uuid" routerDirection="forward">
        <ion-label>{{tdl.name}}</ion-label>
        <p item-end>{{tdl.items.length}}</p>
      </ion-item>

      <ion-item-options side="end">
        <ion-item-option color="danger" (click)=delete(tdl.uuid,tdl.name)>
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>

<-- This item-option does not display its icon the correct way -->
        <ion-item-option [routerLink]="'/editlist/' + tdl.uuid" routerDirection="forward" color="primary" (click)=resetList()>
          <ion-icon slot="icon-only" name="create"></ion-icon>
        </ion-item-option>
<-- -->
      </ion-item-options>
    
    </ion-item-sliding>

  </ion-list>
</ion-content>`

bugionic

Working solution
Remove "[routerLink]="..." routerDirection="..." corrects the bug

@ionitron-bot ionitron-bot bot added the triage label Feb 6, 2019

@IQbrod

This comment has been minimized.

Copy link
Author

commented Feb 6, 2019

The problem comes from the ion-item-option > #shadow-root > a class="button-native"
This class provides padding : 0.7

I tried to add this sample of code in global.css

.button-native {
    padding: 0;
}

But the bug isn't fixed. Any idea how to fix it ?

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

Thank you for the issue! I was able to reproduce this in the conference app, it looks like the problem is the rendering of an <a> tag instead of a <button> which needs the following styles that the button element is getting:

display: inline-block;
box-sizing: border-box;

The problem is it isn't easy to apply a workaround on this, but I will add this fix in as part of this PR: #17711

@brandyscarney brandyscarney self-assigned this Mar 8, 2019

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Mar 8, 2019

@ionitron-bot ionitron-bot bot removed the triage label Mar 8, 2019

brandyscarney added a commit that referenced this issue Mar 8, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to Needs review 🤔 in Ionic Core Mar 8, 2019

Ionic Core automation moved this from Needs review 🤔 to Done 🎉 Mar 15, 2019

brandyscarney added a commit that referenced this issue Mar 15, 2019

fix(item-option): add styling for slots other than icon-only (#17711)
styles the item option properly when icons are slotted. This was not working before at all for `top` and `bottom` slots.

- removes the e2e test from item/sliding in favor of all of them being under item-sliding
- adds more usage examples for all frameworks
- updates the styling for an anchor option so that it displays properly
- updates the standalone e2e test to take screenshots of the start icon, top icon, and anchor options
- updates the interactive e2e test to work locally
- cleaned up the CSS for start/end icons
- verified the styles for ben approval 💪

closes #17737 fixes #17402

santoshyadav198613 added a commit to santoshyadav198613/ionic that referenced this issue Mar 16, 2019

fix(item-option): add styling for slots other than icon-only (ionic-t…
…eam#17711)

styles the item option properly when icons are slotted. This was not working before at all for `top` and `bottom` slots.

- removes the e2e test from item/sliding in favor of all of them being under item-sliding
- adds more usage examples for all frameworks
- updates the styling for an anchor option so that it displays properly
- updates the standalone e2e test to take screenshots of the start icon, top icon, and anchor options
- updates the interactive e2e test to work locally
- cleaned up the CSS for start/end icons
- verified the styles for ben approval 💪

closes ionic-team#17737 fixes ionic-team#17402
@ionitron-bot

This comment has been minimized.

Copy link

commented Apr 14, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Apr 14, 2019

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

fix(item-option): add styling for slots other than icon-only (ionic-t…
…eam#17711)

styles the item option properly when icons are slotted. This was not working before at all for `top` and `bottom` slots.

- removes the e2e test from item/sliding in favor of all of them being under item-sliding
- adds more usage examples for all frameworks
- updates the styling for an anchor option so that it displays properly
- updates the standalone e2e test to take screenshots of the start icon, top icon, and anchor options
- updates the interactive e2e test to work locally
- cleaned up the CSS for start/end icons
- verified the styles for ben approval 💪

closes ionic-team#17737 fixes ionic-team#17402
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.