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

bug: item sliding options are not applying layout properly #17737

Closed
brandyscarney opened this issue Mar 8, 2019 · 2 comments

Comments

2 participants
@brandyscarney
Copy link
Member

commented Mar 8, 2019

Bug Report

Ionic version:

[x] 4.x

Current behavior:
Slotted items in an item option are not styling properly.

Expected behavior:
If the slot is top or bottom the item should be on top of or below the label

Steps to reproduce:
See the following Codepen, open the "top" and "bottom" layout items: https://codepen.io/brandyscarney/pen/VRWLOd?editors=1000

Related code:

Example of one that doesn't work:

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        Sliding Item, Icons Bottom
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
        <ion-icon slot="bottom" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
        <ion-icon slot="bottom" name="archive"></ion-icon>
        Archive
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

Ionic info:

master

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

@brandyscarney brandyscarney self-assigned this Mar 8, 2019

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

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

@brandyscarney brandyscarney moved this from Backlog 🤖 to In progress 🤺 in Ionic Core Mar 8, 2019

@7freaks-otte

This comment has been minimized.

Copy link

commented Mar 15, 2019

I was struggling with the same, slot="icon-only" to get bigger icons, but the text was to its right in the same big font-size. My workaround until this is fixed is wrapping with a div and a span:

<ion-item-option color="danger" (click)="delete(item)">
    <div slot="icon-only">
        <ion-icon name="trash"></ion-icon>
        <span>Delete</span>
    </div>
</ion-item-option>

and adding the following CSS:

ion-item-option div[slot="icon-only"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
        font-size: 14px;
    }
}

@brandyscarney brandyscarney moved this from In progress 🤺 to Needs review 🤔 in Ionic Core Mar 15, 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.