0

I am working in a "Nuxt" app and using "Vuetify" as my framework. this is the code of one of my components:

<template>

<v-text-field
  color="var(--color4)"
  class="px-15"
>

  <template v-slot:label>

      <span class="labelClass">
          please enter your name
      </span>

  </template>

</v-text-field>

</template>

<style scoped>
.labelClass {
  font-size: 1.2rem;
}
</style>

I wanted to increase the font-size of label in input. according to Vuetify ducomentation we must use "slots" for doing that. so I added a new template and "slot" to that. Then I used labelClass for the span inside that to control the font-size. the font-size changed but the problem here is that if I increase font-size (for example to 1.8rem), some parts of the text of that disappears:

enter image description here

And it becomes worse, if the font-size increases. I also read this question, but it did not help me. I also tried to set "height" prop for v-text-field and some classes like v-text-field__slot but they did not work for me.

hamid-davodi
  • 1,602
  • 2
  • 12
  • 26

2 Answers2

0

The problem is, that after render the input get this css style:

.v-input input {
    max-height: 32px;
}

To solve this, you simply need to overwrite this. If you don´t want to override this for every input, just add another class to your v-text-field:

<v-text-field
  color="var(--color4)"
  class="px-15 my-class"
>

... and then use it like this:

.v-input.my-class input {
    max-height: 32px;
}

Edit: Looks like you also need to override the following style:

.v-input .v-label {
    height: 20px;
    line-height: 20px;
    letter-spacing: normal;
}

This is the style of the label, you need to increase height and line-height. Another override needs to be done at:

.v-text-field input {
    flex: 1 1 auto;
    line-height: 30px;
    padding: 8px 0 8px;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

The line-height needs to be increased.

As your html in your slot is only displayed in the slot, line-height and max-width from parents affect the visible space.

StevenSiebert
  • 1,306
  • 4
  • 15
  • 26
  • Did you test it yourself? it does not work for me. – hamid-davodi Aug 27 '21 at 19:11
  • @hamid-davodi I tested it on the page of the documentation. Please inspect the structure in your browser after render. – StevenSiebert Aug 27 '21 at 19:13
  • I mean that again after increasing font-size the text disappears in my app and the "max-height" does not solve my problem. – hamid-davodi Aug 27 '21 at 19:16
  • it does not work for me, if you tested it please put the whole component code in your answer to check it. – hamid-davodi Aug 27 '21 at 19:37
  • @hamid-davodi Maybe because you provide the `css` in your component as scoped. As the `label` and `input` will be created during render and ` – StevenSiebert Aug 27 '21 at 19:46
0

you can use class="text-h3" inside 

<v-text-field
 v-model="item"
 label="label"
 class="text-h3"
></v-text-field>
pro info
  • 11