Ionic-framework: Placing ion-buttons component in ion-navbar inside custom component breaks navbar button styles.

[lpikora]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When you create custom component (or attribute directive - https://angular.io/guide/attribute-directives) eg. navbar-buttons with template:

      <button ion-button icon-only>
        <ion-icon name="contact"></ion-icon>
      </button>

and place it to ion-buttons inside ion-navbar of ion-header component:

<ion-header>
  <ion-navbar>
    <ion-title>
    Title
    </ion-title>

    <ion-buttons navbar-buttons end>
    </ion-buttons>

  </ion-navbar>
</ion-header>

it breaks <button ion-button> styles.

Expected behavior:
It should display same as:

<ion-header>
  <ion-navbar>
    <ion-title>
    Title
    </ion-title>

    <ion-buttons end>
       <button ion-button icon-only>
        <ion-icon name="contact"></ion-icon>
      </button> 
    </ion-buttons>

  </ion-navbar>
</ion-header>

Steps to reproduce:
described in Current behavior

Related code:

code in Current behavior

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages:

    @ionic/cli-plugin-cordova       : 1.5.0 (/home/lukas/Mapotic/mapotic_app/node_modules/@ionic/cli-plugin-cordova)
    @ionic/cli-plugin-ionic-angular : 1.4.0 (/home/lukas/Mapotic/mapotic_app/node_modules/@ionic/cli-plugin-ionic-angular)
    @ionic/cli-utils                : 1.6.0 (/home/lukas/Mapotic/mapotic_app/node_modules/@ionic/cli-utils)
    ionic (Ionic CLI)               : 3.6.0 (/home/lukas/Mapotic/mapotic_app/node_modules/ionic)

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 26.0.2
    Node              : v8.2.1
    OS                : Linux 4.10
    npm               : 5.2.0

[AmitMY]

Can confirm. I write custom styles to fix this, would be nice if it was done inside ionic.

[jgw96]

Hello all! This is currently an issue because of how things get slotted in Angular. With the upcoming v4 release we will be using native web component slots for our components, which should fix this issue. We are already seeing it fix a few similar issues with our internal testing. Ill keep this issue open until i can confirm that it fixes this specific issue. Thanks!

[AmitMY]

Duplicate of https://github.com/ionic-team/ionic/issues/10379
Although I like this issue more as it is in an up to date version

[yigitbacakoglu]

Still having this issue

[none100p]

same problem here with
cli packages:

@ionic/cli-plugin-proxy : 1.5.6
@ionic/cli-utils        : 1.19.2
ionic (Ionic CLI)       : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.4.0 browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v6.11.5
npm  : 3.10.10 
OS   : Linux 4.4

[eduardoRoth]

Eight months later, issue still persists; seems that the problem is that ionic doesn't recognizes the button as bar-button.

HTML generated if you add the button from a custom component is:

<ion-buttons empresa="" end="" class="bar-buttons bar-buttons-md">
   <button class="button button-md button-default button-default-md button-md-light" color="light" icon-only="" ion-button="" ng-reflect-color="light"><span class="button-inner"><ion-icon name="options" role="img" class="icon icon-md ion-md-options" aria-label="options" ng-reflect-name="options"></ion-icon></span><div class="button-effect"></div></button>
</ion-buttons>

_empresa is my custom component_

And it should be like this:

<ion-buttons empresa="" end="" class="bar-buttons bar-buttons-md">
   <button class="bar-button bar-button-md bar-button-default bar-button-default-md bar-button-md-light" color="light" icon-only="" ion-button="" ng-reflect-color="light"><span class="button-inner"><ion-icon name="options" role="img" class="icon icon-md ion-md-options" aria-label="options" ng-reflect-name="options"></ion-icon></span><div class="button-effect"></div></button>
</ion-buttons>

_Notice the bar- prefix for every button class_

Is there a way we can force the class to the button? A "it's been fixed for the next release" answer doesn't seem like a good solution.

[AmitMY]

@eduardoRoth v4 is in alpha.
if the problem persists there, please note here and it should be addressed

[eduardoRoth]

@AmitMY, so there's nothing that we could do to fix this only wait for v4 to be released?

[AmitMY]

@eduardoRoth as far as I know, yes

[Amosss]

Just encountered the same problem. I understand that I should wait for the next version of ionic (when is it?), has anyone found a temp fix til then? Thanks

[ghenry22]

So the answer on 4 Aug 2017 was just hang out for V4. Anyone with any kind of deadline or live application that needs to resolve this is pretty screwed 10 months or so later when V4 still is not available. There must be a way to resolve this so that the correct styles are applied.

I'm really looking forward to V4 but there are problems in V3 which have been present since V2 Beta stage that are yet to be fixed, it would be great if there could be a small clean up push on V3 for some of these long lived issues.

[lpikora]

Rewriting whole app in React Native solved this issue for me (and many more issues).
Closing this issue because Ionic V4 is here already and there will be no fix for V3 i think.

[ghenry22]

I resolved it like this:
In my component html file apply the customButton class:

<button ion-button icon-only clear (click)="openDownloadStatus($event)" [className]="customButton">
  <ion-icon name="md-cloud-outline" color="light"></ion-icon>
</button>

in my component .ts file:

customButton:string = "disable-hover bar-button bar-button-ios bar-button-default bar-button-default-ios";

    if(this.platform.is('android'){
      this.customButton = "disable-hover bar-button bar-button-md bar-button-default bar-button-default-md";
    }

I default it to IOS style but adjust it in ngOnInit for android. Could you also pass in the platform as an @Input parameter.

[ionitron-bot[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.