Vuetify: [Bug Report] Height prop does nothing in inputs

Created on 4 Oct 2018  路  13Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.2.5
Vue: 2.5
Browsers: Chrome
OS: OSX

height prop doesn't work but it is in the documentation.

screen shot 2018-10-04 at 02 07 01

Example
https://codepen.io/atilkan/pen/LgNZXV?&editors=101

VInput bug

Most helpful comment

use the dense prop - it solved my issue

All 13 comments

If you set height:100 you will see that it works.

I noticed that if the textfield is box or outline min-height of 56px is set:
.v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot { min-height: 56px; }

And for solo text fields, the min-height is 48px:
.v-text-field.v-text-field--solo .v-input__control { min-height: 48px; }

So if the value is too low, it won't work.

Bummer. I need to make it lower than that.

I'm not from Vuetify, so they will say the best way to do that.
I'm just showing to you why it isn't working.
But of course you can override the CSS.

Thanks. I dont like css overwrite. I prefer writing myself.
I leave an example here that might help someone. https://codepen.io/atilkan/pen/GYpRwx

Hi Vuetify Community,

Are anybody analysis this issue?

I needs set height to text-field outline but because it doesn't work.

I hope known more about the fix if anybody analysed this bug please talk to me to work into fix it.

Thanks!
Best regards!! :)

I wrote like below.

.v-input__control{
  min-height: 30px !important;
}

Is overwriting the CSS is still best way/only way to do it ?
The filled style is still too big as a default compared to others when applying dense.

Same thing in vuetify 2.1.14, it's still restricting the functionality of the height prop...

I am facing the same issue. Tried using deep selectors

Will it be fixed or not?

@michaelprankl99 Not probably. Try to open issue for version 2 and wait for it to be solved for another year.

use the dense prop - it solved my issue

Please only create issues with the provided issue creator. In the boilerplate for creating an issue, it explains that any ticket made without this will be automatically closed. For general questions, please join the Discord chat room. You can also check reddit or stackoverflow. Thank you.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aaronjpitts picture aaronjpitts  路  3Comments

gluons picture gluons  路  3Comments

paladin2005 picture paladin2005  路  3Comments

cawa-93 picture cawa-93  路  3Comments

jofftiquez picture jofftiquez  路  3Comments