Vuetify: [Help]How to make the global text not uppercase/capitalize

Created on 22 Aug 2017  路  6Comments  路  Source: vuetifyjs/vuetify

Steps to reproduce

  1. The component like v-toolbar and v-btn , the default text is uppercase ,how to make all the text not to be uppercase? Is there an option to change this css style globally ?
  2. I don't want to use the { text-transform: capitalize; } in all components one by one.
  3. Is that Material design's default style ? If that ,how to disable it?

    Versions


Vuetify 0.14

What is expected ?


The text in component cannot be lowercase.

What is actually happening ?


All the text trim to uppercase character.

Reproduction Link


https://vuetifyjs.com/vuetify/quick-start

Most helpful comment

Just simple
`

  • {
    text-transform: none !important;
    }
    `

All 6 comments

This is part of MD spec and would be up to the developer to define their own global styles removing it.

How to disable this for tabs for now?

Just simple
`

  • {
    text-transform: none !important;
    }
    `

After accepting https://github.com/vuetifyjs/vuetify/pull/2858 this would be much easiert. I had check before and found out there are only two places in vuetify stylus files where text-transform is set. It's in _buttons.styl (where it can be set with a variable) and in _tabs.styl where it is just hardcoded.

My PR solves the Problem and you can set text-transform to none if desired simply by setting the variable accordingly.

The team has already discussed your PR @julkuh , it's something I plan on merging before 1.0 release.

@Imanullah Adding your style to the main component (App.vue in my case) solved the problem.
<style> *{ text-transform: none !important; } </style>

Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alterhu2020 picture alterhu2020  路  3Comments

milleraa picture milleraa  路  3Comments

SteffenDE picture SteffenDE  路  3Comments

smousa picture smousa  路  3Comments

cawa-93 picture cawa-93  路  3Comments