ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.52k forks source link

Ionic v2 - Tab Template - Icons are not centered (beta 7) #6590

Closed tonyawad88 closed 8 years ago

tonyawad88 commented 8 years ago

Short description of the problem:

The bar under the tabs in the tab template, have extra width that doesn't match their parent tab. Hope this makes sense :) barebone_beta7_tab_tempate

screen shot 2016-05-20 at 6 33 36 am

What behavior are you expecting?

I am expecting it to be centered.

Steps to reproduce:

  1. ionic start tabtemp --v2 --ts
N/A

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) N/A

Which Ionic Version? 2.x

Plunker that shows an example of your issue

N/A

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

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6 
ios-sim version: 5.0.3 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.3.1 Build version 7D1014 
brandyscarney commented 8 years ago

Hey, thanks for the issue! Are you running this on the browser or on a device? I am not able to reproduce it following your steps and using ionic serve.

tonyawad88 commented 8 years ago

@brandyscarney Hi Brandy, I am running in the browser, Chrome Version 50.0.2661.102 (64-bit). I am not running in "Device Mode" in chrome. Just plain Chrome with "ionic serve"

brandyscarney commented 8 years ago

@tonyawad88 Hmm so I updated Chrome but I still can't reproduce it. :( I started a new tab project using your command ionic start tabtemp --v2 --ts and made no changes. Here's my info:

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.4.2
Xcode version: Xcode 7.3.1 Build version 7D1014

Could you try removing node_modules and doing a fresh npm install? I'm not sure what is going on here. You didn't make any changes to the starter, correct?

tonyawad88 commented 8 years ago

@brandyscarney I removed all node modules and did an npm install. The output results attached below. No error, it ran successfully.

I just figured it out... you know the "zoom" in/out in Chrome, I had it set to 70%...

I apologize for wasting your time, my bad !!! :(

brandyscarney commented 8 years ago

@tonyawad88 It's fine! Glad it's resolved. I've definitely done something similar before so no worries. :smile: