Ionic v2 Button text in caps

Question

In my ionic v2 app is a button, no matter which text I type in, it's always capitalized. I don't want to add css-utilities, because i have mixed lower and upper case words.

Here is my code:

<button ion-button large block color="danger" (click)="openPage($event, 0)">
    This is my test Text.
</button>

I've tried to remove all properties from the button tag, but that did not worked. Any suggestions?

Answer 1

To set it globally add

.button {
   text-transform: none;
 }

Inside global.scss

Answer 2

It seems the button has text-transform set to uppercase in CSS. Add the following CSS to your button: text-transform: none; to override the CSS property set.

Your code becomes something like this:

<button ion-button large block color="danger" style="text-transform: none;" (click)="openPage($event, 0)">
    This is my test Text.
</button>

For more information on the text-transform property CSS text-transform Property

Answer 3

Put the following in the variables.scss

    $button-md-text-transform: none;

By default, the value is uppercase for Android platform. Change it to none. This will be applied to every button in your app.

Answer 4

You can use Platform Specific Styles to style the buttons in your application.

Ionic2 has four platforms:

1. ios: Viewing on an iPhone or iPad, mode = 'ios'.
2. android: Viewing on any android device, mode = 'md'.
3. windows: Viewing on any windows device, mode = 'wp'.
4. core: Any platform that doesn't fit any of the above platforms will use the Material Design styles, mode = 'md'.

---

Overriding the Mode Styles. You can use the class that is applied to the body to override specific properties in mode components. In this case you would like to override the button style to have no text transform.

Place the code down here in the variables.scss file. Scroll down untill you see the section "App iOS Variables" or "App Material Design Variables"

// Style Android buttons
.md button {
  text-transform: none;
}

// Style iOS buttons
.ios button {
  text-transform: none;
}

// Style Windows Phone buttons
.wp button {
  text-transform: none;
}

---

More about theming your app: Theming your Ionic App
More about CSS text-transform property: Here