ionic-framework: bug: Buttons not getting the correct class

Bug Report

Ionic version:

[x] 4.x

Current behavior:

this code:

 <ion-button slot="start">
            <ion-icon name="arrow-dropup" slot="icon-only"></ion-icon>
          </ion-button>
          <ion-label text-wrap (click)="buttonModify(button)"> {{button.title}} </ion-label>
          <ion-button slot="end">
            <ion-icon name="arrow-dropdown" slot="icon-only"></ion-icon>
          </ion-button>

generates the following output. The buttons don’t size the same.

Expected behavior:

The buttons would be the same size.

Steps to reproduce:

From my conversation on Slack with Mike Hartington:

ou use the slots to place content on the left/right of the item
27 replies

johnwargo   [39 minutes ago]
yeah, that's where I started and it didn't work right either (edited)

johnwargo   [39 minutes ago]
i'll go back and try that again and let you know. Thanks!!

mike (do not ping)   [38 minutes ago]
did you add the slots for the icons/buttons?

mike (do not ping)   [38 minutes ago]
<ion-button slot="start">
            <ion-icon name="arrow-dropup" slot="icon-only"></ion-icon>
          </ion-button>
          <ion-label text-wrap (click)="buttonModify(button)"> {{button.title}} </ion-label>
          <ion-button slot="end">
            <ion-icon name="arrow-dropdown" slot="icon-only"></ion-icon>
          </ion-button>

mike (do not ping)   [38 minutes ago]
basically, the slot="icon-only" will size thing consistently

johnwargo   [38 minutes ago]
OK, thanks.

johnwargo   [37 minutes ago]
although I didn't try `icon-only`.

johnwargo   [30 minutes ago]
No change (except the first one is pushed left)
This file was deleted.

mike (do not ping)   [29 minutes ago]
Mmm, looks like something else is causing this

mike (do not ping)   [28 minutes ago]
any chance you could push this to github?

johnwargo   [28 minutes ago]
its already there. what's our github ID? I'll add you to it

mike (do not ping)   [27 minutes ago]
mhartington

johnwargo   [25 minutes ago]
https://github.com/johnwargo/timeslicer-ionic

johnwargo   [24 minutes ago]
sorry, this branch: https://github.com/johnwargo/timeslicer-ionic/tree/new-project-form

johnwargo   [24 minutes ago]
project-edit page

mike (do not ping)   [16 minutes ago]
ios or android?

johnwargo   [12 minutes ago]
browser

johnwargo   [12 minutes ago]
ionic serve

johnwargo   [11 minutes ago]
haven't tried it on a phone yet (or emulator/simulator)

johnwargo   [10 minutes ago]
Oh, and I did the grid so the first one (with no up button) would line up correctly with the other rows.

mike (do not ping)   [6 minutes ago]
Hmm, still seems not right. could you open an issue for this?

johnwargo   [5 minutes ago]
Sure

johnwargo   [4 minutes ago]
where? Main repo? (edited)

mike (do not ping)   [3 minutes ago]
yeah

mike (do not ping)   [3 minutes ago]
http://github.com/ionic-team/ionic
GitHub
ionic-team/ionic
Build amazing native and progressive web apps with open web technologies. One app running on everything :tada: - ionic-team/ionic

mike (do not ping)   [3 minutes ago]
I know what the issue is

mike (do not ping)   [3 minutes ago]
the buttons are not getting the right classes they need

Related code:

 <ion-button slot="start">
            <ion-icon name="arrow-dropup" slot="icon-only"></ion-icon>
          </ion-button>
          <ion-label text-wrap (click)="buttonModify(button)"> {{button.title}} </ion-label>
          <ion-button slot="end">
            <ion-icon name="arrow-dropdown" slot="icon-only"></ion-icon>
          </ion-button>

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

Ionic:

ionic (Ionic CLI) : 4.12.0 (/Users/johnwargo/.nvm/versions/node/v11.12.0/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.0.1 @angular-devkit/build-angular : 0.12.4 @angular-devkit/schematics : 7.2.4 @angular/cli : 7.2.4 @ionic/angular-toolkit : 1.3.0

Capacitor:

capacitor (Capacitor CLI) : 1.0.0-beta.19 @capacitor/core : 1.0.0-beta.17

System:

NodeJS : v11.12.0 (/Users/johnwargo/.nvm/versions/node/v11.12.0/bin/node) npm : 6.9.0 OS : macOS Mojave

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 15 (10 by maintainers)

Commits related to this issue

fix(button): use correct size on a dynamic button in an item (#18395) fixes ##18085 — committed to ionic-team/ionic-framework by topalavlad 5 years ago
fix(button): use correct size on a dynamic button in an item (#18395) fixes ##18085 — committed to abennouna/ionic by topalavlad 5 years ago

Most upvoted comments

@topalavlad So the reason hostData is better is because it will work with the size dynamically changing. In componentWillLoad it will only set the size when the button initializes, but every time you change the size it will check for item. So if you start with the following:

<ion-item>
  <ion-button slot="start" size="large">Button</ion-button>
</ion-item>

And then remove the size, it will still update to use small. Your PR looks great though! I pushed a small change for this.

brandyscarney on Jun 10, 2019

Thanks @topalavlad! Our tests are written in vanilla JavaScript, so basically you wouldn’t use Angular to reproduce it in an e2e test.

Since the code is happening after the item loads, I think the *ngIf on the button may be causing the issue. I created the following Codepen to reproduce this, you have to click “Add a Button” to see: https://codepen.io/brandyscarney/pen/VOMaXw?editors=1111

brandyscarney on May 20, 2019