Display label in left when property reversed in v-text-field is added

[eralbagraba]

If you want to change it globally you can apply the styles below in App.vue file

.v-label.theme–light {
left: 0 !important;
right: auto !important;
}

.v-input .v-text-field–reverse .v-input__control .v-input__slot fieldset legend {
width: auto !important;
}

.v-application–is-ltr .v-text-field–reverse .v-label{
transform-origin: top left;
}
.v-application–is-ltr .v-text-field–outlined.v-text-field–reverse legend{
margin-right: auto  !important;
margin-left:0px!important;
}

 

If you want changes only in one component than you should add a class to the text field and then apply the styles below.

At your textfield

<v-text-field
class=”label-left”
reverse
v-model=”item.order”
label=”Renditja”
hide-details
outlined
type=”number”
>
</v-text-field>

<style scoped lang=”scss”>
.v-input .label-left .v-text-field–reverse .v-input__control .v-input__slot fieldset legend {
width: auto !important;
}

.v-application–is-ltr .label-left .v-text-field–reverse .v-label{
transform-origin: top left;
}
.v-application–is-ltr .label-left .v-text-field–outlined.v-text-field–reverse legend{
margin-right: auto  !important;
margin-left:0px!important;
}

</style>

[Author]

Posts