I am facing an issue with the height of a vuetify textfield in my codepen example with version 1.5.x: https://codepen.io/handy29/pen/yLLwjGg. The height of the textfield does not match my design as shown here: https://i.stack.imgur.com/qfrTw.png. I have tried following suggestions from this link, but the text field still remains the same. Here is the CSS code I have used:
.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
border-width: 1px;
}
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover{
border-width: 1px;
border-style: solid;
border-color: #6fbd44;
}
This is my HTML code:
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6 md3>
<v-text-field
width="700px;"
height="-1"
outline
single-line
></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-app>
</div>
Any advice on how to solve this issue would be greatly appreciated. Thank you.