Ionic-framework: Ionic 2: Navbar icons are too close, need more padding by default

[daveshirman]

Short description of the problem:

When you have multiple icons in the navbar, they're too close.
Yes I can fix this with css, but the framework should do this correctly from the start.

What behavior are you expecting?

Correct padding between multiple navbar icons

Steps to reproduce:

1. Look at the screenshot attached: My ionic 2 app nav up top, then Trello, then Gmail.
   
2. Despair.

<ion-header>
  <ion-navbar>
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="refresh"></ion-icon>
      </button>
      <button ion-button icon-only>
        <ion-icon name="funnel"></ion-icon>
      </button>      
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Page Title</ion-title>
  </ion-navbar>  
</ion-header>

My workaround for now on iOS and Android:

.bar-button-md {
    margin-left: 0.8rem !important;
    margin-right: 0.8rem !important;
}

.bar-button-ios {
    padding: 0 5px !important;
}

Which Ionic Version? 1.x or 2.x
2 RC.0

Plunker that shows an example of your issue

http://plnkr.co/edit/e2tsPpzVk4PWOjosqqBn?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Davids-MacBook-Air:catsi daveshirman$ ionic info

Your system information:

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v4.3.0
Xcode version: Xcode 7.2.1 Build version 7C1002 

[manucorporat]

@brandyscarney seems like a legit improvement.

[daveshirman]

@manucorporat Has any change been made to the framework to accommodate this or not?

[daveshirman]

@adamdbradley The team has been super silent with many of these outstanding issues and they need addressing. Any updates please?

[daveshirman]

@jgw96 Hi, can we get an update please? This is kinda important, especially since have multiple icons in the nav overlap the title on iPhone 5!

[daveshirman]

@jgw96 @manucorporat Hi, can you reply please? There are so many outstanding tickets like this with no acknowledgement. Thanks.

[Nainachi]

Thanks...

[brandyscarney]

I'll add it to our milestone to take a look at for v4, please take a look at our blog here for more information: https://blog.ionicframework.com/whats-the-issue-with-issues/

Thanks! 🙂

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/134