text-center css utility doesn't center text #10567

prashantkurlekar · 2017-02-27T02:35:46Z

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.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:
text-center css utility doesn't center the text.

Expected behavior:
text-center css utility center align the text.

Steps to reproduce:
use ionic version 2.1.0

Related code:

<ion-item text-center><a (click)="myEvent()">Some text</a></ion-item>

Other information:
this issue is not there with 2.0.1

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

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0 
ios-sim version: 5.0.11 
OS: macOS Sierra
Node Version: v7.5.0
Xcode version: Xcode 8.2.1 Build version 8C1002
![localhost-8120- iphone 6 1](https://cloud.githubusercontent.com/assets/4653712/23346791/7229121c-fcf1-11e6-9b6a-60c5d273cf10.png)
![localhost-8120- iphone 6](https://cloud.githubusercontent.com/assets/4653712/23346792/722a21ca-fcf1-11e6-9f78-ff3a26f9d173.png)

The text was updated successfully, but these errors were encountered:

brandyscarney · 2017-02-27T16:08:36Z

Thanks for the issue! This was caused by moving the css from typography to app: f47d492

urm47 · 2017-03-14T19:56:30Z

same question, text-center doesn't seem to work anymore:

<ion-item class="small-info" text-center text-wrap *ngIf="username != ''">Logged in as {{username}}</ion-item>

edit:
.item-block overwrites text-align

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

Arnaud49 · 2017-04-07T13:30:59Z

hello here, I confirme I have this issue running in my project since I update ionic, can you correct this ? or give us some temporary correction ?

- moves breakpoint mixins to the ionic.mixins file - adds responsive attributes for text alignment, transform, and floating elements - adds ability to turn these off so they don’t get added to the css file using sass variables references #10904 closes #10567

floydspace · 2017-05-12T20:01:50Z

@Arnaud49 What I did, just put @import "../../node_modules/ionic-angular/components/app/app";
to the beginning of my app.scss and it overrided the styles back.
But be careful it also overrides App Structure styles - see

brandyscarney · 2017-05-12T20:15:54Z

This should no longer be an issue since v3.1.0. Please let me know if you are still running into this on 3.1.0+. Thanks!

floydspace · 2017-05-12T20:22:05Z

@brandyscarney Sure, but migration to the v3.1.0 from v2.0.0 is more painful than to v2.3.0 for example. So I had to do such workaround.

brandyscarney · 2017-05-12T20:34:50Z

@F1oyd Are there some issues in particular that are making it hard to upgrade? The steps to go from v2 to v3 should be fairly simple, but maybe you are running into some blocking issues or steps that aren't documented?

https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#300-2017-04-05

floydspace · 2017-05-12T20:42:44Z

@brandyscarney We use a couple of third-party libs which don't work with angular 4. If it is possible it will be more expensive.

mhartington · 2017-05-12T20:51:01Z

Hey @F1oyd , what libraries are you using that don't work with Angular 4?

floydspace · 2017-05-12T22:13:22Z

Okay. you made me do it. So I couldn't find any unsupported third-party lib in my app, but hypothetically it could be.
I wanted to say that migration to the major version is more expensive and in some cases, it's not possible without a lot of hours of QA. So it would be good to have a previous major release without bugs if it's possible.
Thank you.

mhartington · 2017-05-15T13:49:30Z

but hypothetically it could be.

Hypothetically, yes. But this is something to note when there is a major version change (2.x => 4.x for angular). Any libraries that you have that are based on Angular should have their supported version listed in their dependencies. That and they should release an update that is also a major version change.

I wanted to say that migration to the major version is more expensive and in some cases, it's not possible without a lot of hours of QA

We do list all of our breaking changes in the change log and note when things have been changed or removed from the framework. So we try to make sure everyone is on the same page.

So it would be good to have a previous major release without bugs if it's possible.

We're not perfect, we've accepted this. But when there are unforeseen issues, we do make sure to get a patch release out to fix our mistakes 😄

shivamsngh · 2017-08-07T13:53:32Z

HI @brandyscarney , Im using latest ionic 3.7.0 and in Debug mode everything is working perfectly fine but in Prod mode , I think the inbuilt Ionic CSS doesn't load also text-center doesn't work. There is no padding and margin on ion-items

brandyscarney · 2017-08-07T16:13:14Z

Hello @shivamsngh, so it sounds like 3.7.0 is your Ionic CLI version. If you run ionic info from within your project it should print something similar to this:

cli packages:

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.1.7
    Node              : v7.5.0
    OS                : OS X El Capitan
    Xcode             : Xcode 8.2.1 Build version 8C1002
    npm               : 4.6.1

Can you verify that your Ionic Framework ionic-angular version and @ionic/app-scripts matches mine? Steps to upgrade between versions are here: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

shivamsngh · 2017-08-07T16:41:19Z

Ionic Info:

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.0.0
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.5.3

System:

Android SDK Tools : 25.2.5
Node              : v7.5.0
OS                : macOS Sierra
npm               : 4.1.2

I just downgraded my apps-scripts to 2.0.0 from 2.1.3 due to missing css styles. I think the best possible scenario of my situation is in apps-scripts issue 1120 ionic-team/ionic-app-scripts#1120 .

shivamsngh · 2017-08-07T16:53:39Z

@brandyscarney ohh i think i got the problem , it was my ionic-angular version that was 3.5.3 instead of 3.6.0, thank so much for help brandy.. 👍

Working for me now at,

cli packages:

ionic/cli-plugin-cordova       : 1.6.2
ionic/cli-plugin-ionic-angular : 1.4.1
ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

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 : 25.2.5
Node              : v7.5.0
OS                : macOS Sierra
npm               : 4.1.2

ionitron-bot · 2018-09-02T08:54:25Z

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.

brandyscarney referenced this issue Feb 27, 2017

refactor(typography): move main typography styles to app

f47d492

brandyscarney self-assigned this Feb 27, 2017

jgw96 added css labels Feb 27, 2017

brandyscarney mentioned this issue Apr 14, 2017

feat(app): add responsive utility attributes #11228

Merged

brandyscarney closed this as completed in cf24057 Apr 14, 2017

ionitron-bot bot locked and limited conversation to collaborators Sep 2, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

text-center css utility doesn't center text #10567

text-center css utility doesn't center text #10567

prashantkurlekar commented Feb 27, 2017

brandyscarney commented Feb 27, 2017

urm47 commented Mar 14, 2017 •

edited

Loading

Arnaud49 commented Apr 7, 2017

floydspace commented May 12, 2017

brandyscarney commented May 12, 2017

floydspace commented May 12, 2017

brandyscarney commented May 12, 2017

floydspace commented May 12, 2017

mhartington commented May 12, 2017

floydspace commented May 12, 2017

mhartington commented May 15, 2017

shivamsngh commented Aug 7, 2017

brandyscarney commented Aug 7, 2017

shivamsngh commented Aug 7, 2017 •

edited

Loading

shivamsngh commented Aug 7, 2017 •

edited

Loading

ionitron-bot bot commented Sep 2, 2018

text-center css utility doesn't center text #10567

text-center css utility doesn't center text #10567

Comments

prashantkurlekar commented Feb 27, 2017

brandyscarney commented Feb 27, 2017

urm47 commented Mar 14, 2017 • edited Loading

Arnaud49 commented Apr 7, 2017

floydspace commented May 12, 2017

brandyscarney commented May 12, 2017

floydspace commented May 12, 2017

brandyscarney commented May 12, 2017

floydspace commented May 12, 2017

mhartington commented May 12, 2017

floydspace commented May 12, 2017

mhartington commented May 15, 2017

shivamsngh commented Aug 7, 2017

brandyscarney commented Aug 7, 2017

shivamsngh commented Aug 7, 2017 • edited Loading

shivamsngh commented Aug 7, 2017 • edited Loading

ionitron-bot bot commented Sep 2, 2018

urm47 commented Mar 14, 2017 •

edited

Loading

shivamsngh commented Aug 7, 2017 •

edited

Loading

shivamsngh commented Aug 7, 2017 •

edited

Loading