Geek Answers Handbook

Ionic v2 text buttons in caps

There is a button in my ionic v2 application, no matter what text I enter, it is always capitalized. I do not want to add css utilities because I have mixed words in lower and upper case.

Here is my code:

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

I tried to remove all properties from the button tag, but this did not work. Any suggestions?

+7
css ionic-framework ionic2
source share
4 answers

The text-transform button seems to be set to uppercase in CSS . Add CSS to your button: text-transform: none; to override the CSS property set.

Your code will become something like this:

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

More about text-transform properties CSS text-transform Property

+13
source share

You can use Platform-specific styles to style buttons in the application.

Ionic2 has four platforms:

  • ios: view on iPhone or iPad, mode = 'ios'.
  • android: view on any Android device, mode = 'md'.
  • windows: view on any Windows device, mode = 'wp'.
  • Kernel: any platform that does not correspond to any of the above platforms will use the styles Material Design, mode = 'md'.

Overriding mode styles. You can use a class that applies to the body to override certain properties in mode components. In this case, you want to override the button style so that there is no text conversion.

Put the code here in the variables.scss file. Scroll down until you see the iOS App Variables or App Content Design Variables section.

 // 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 your application theme: Theming your Ionic App
More on CSS text-transform: Here

+5
source share

Put the following in .scss variables

  $button-md-text-transform: none;

The default value for the Android platform is uppercase. Change it to none. This will apply to every button of your application.

+4
source share

Modify your template as shown below:

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

Add the following code to your app.scss :

 .removeTextTransform { text-transform: none; }

Use the removeTextTransform class whenever you want to remove a text transformation using the ion button.

0
source share

More articles:


All Articles