CODEWITHSUNDEEP
cssionic-frameworkionic2
tom_tom
tom_tom

Reputation: 465

Ionic v2 Button text in caps

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?

Upvotes: 10

Views: 14323

Answers (7)

Maximum
Maximum

Reputation: 11

To set it globally add

.button {
   text-transform: none;
 }

Inside global.scss

Upvotes: 1

Bijeesh E K
Bijeesh E K

Reputation: 33

For IONIC 4

Add text-capitalize="false" to your button.

Eg:

<ion-button text-capitalize="false" shape="round">Click</ion-button>

Upvotes: 0

Apurv Chaudhary
Apurv Chaudhary

Reputation: 1795

add text-capitalize in your button like this

<button ion-button text-capitalize (click)="openPage($event, 0)">This is my test Text.</button>

Upvotes: 1

Man Coding
Man Coding

Reputation: 451

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.

Upvotes: 9

Yuvraj Patil
Yuvraj Patil

Reputation: 8736

Change your template as below: 

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

Add following code in your app.scss:

.removeTextTransform {
  text-transform: none;
}

Use removeTextTransform class whenever you want to remove text transform from your ionic button.

Upvotes: 4

NiekF
NiekF

Reputation: 151

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

Upvotes: 4

yogur
yogur

Reputation: 820

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

Upvotes: 25

Related Questions