https://i.stack.imgur.com/zbCfI.png

I want to create a text field in vuetify but the button can't be made like this? and for the height but it can't it be changed? I've tried several times to change the height and it doesn't work

I already have the css but it's hard to use on vuetify

.parent-box{
  width:fit-content;
  background:#26376B;
}
.text-box{
  border:1px solid #CACACA;
  padding:5px 10px;
  min-width:300px;
}
.btn{
  padding:5px 20px;
  width:100px;
  color:#fff;
  border:none;
  background-color:#26376B;
  cursor:pointer;
}
.common{
  outline:none;
  border-radius:50px;
}

<div >
  <input  type="text" placeholder="Chassis Number">
  <button >Check</button>
</div>

CodePudding user response：

Something similar can be done this way:

...
<v-container>
  <v-layout wrap >
    <v-text-field
       
       outlined
       rounded
       dense
       color="#26376B"
       placeholder="Chassis Number"
       height="27"
       hide-details
    ></v-text-field>
    <button >Check</button>
  </v-layout>
</v-container>

...

<style>
.parent-box {
  background: #26376B;
  width: 400px;
}

.common {
  outline: none;
  border-radius: 20px;
}

.text-field__styled {
  background: #fff;
}

.btn__styled {
  color: #fff; 
  width: 100px;
}

.v-text-field .v-input__control .v-input__slot {
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
}
</style>

Take a look into this CodePen.

Many styles are customizable in vuetify via props. But by default vuetify inspired by Material Design in contrast to your example, and it's not so easy to customize default styles. Possibly it'd be better in your case to apply some of vuetify themes before using this library.

CodePudding user response：

Problem Statement: Want to create the text field with button in Vuetify.

solution: HTML:

show

Vue.js: new Vue({

el: "#app",

vuetify: new Vuetify(),

data: {

    input: ''

},

methods: {

show(){

        alert(this.input)

}

}

})

Output:

The wanted output