0
1.5K
ViewsHow to align v-text-field label using reverse tag in Vuetify.js?
I have used vuetify.js as UI framework in Nuxt.js my latest project. In v-text-field component, I tried to user reverse tag to move text align right. But I didn't move label from align left to align right. I used reverse, label was automatically move to align right.
So, I tried to fix like below. in template↓
<v-text-field
class="label-left"
reverse
label="TOTAL"
persistent-placeholder
dense
outlined
v-model="totalCost"
></v-text-field>
and add style↓
<style lang="scss" scoped>
div ::v-deep .v-label.v-label--active.theme--light {
left: 0 !important;
transform-origin: top left !important;
position: absolute !important;
}
</style>
but result was like below↓
I want to fix the border space to label position. Does anyone advise me,please?
1 answers
Answer question0
If you need to use reverse (for some other reason), repositioning the label is possible with the following styles:
Override the
leftandrightposition of the.v-labelto0andauto, respectively.The gap seen on the border is implemented with a
<legend>element. Override itswidth(which is dynamically calculated at runtime) withauto(may need specific width adjustment based on the label's actual width); and set itsmargin-leftto10px.
<style lang="scss" scoped>
1️⃣
div ::v-deep .v-label.v-label--active.theme--light {
left: 0 !important;
right: auto !important;
}
2️⃣
div ::v-deep .v-input__slot fieldset legend {
margin-left: 10px !important;
width: auto;
}
</style>
On the other hand, if you don't need reverse, you could avoid the custom positioning of the label, and change the input's direction to rtl:
<style lang="scss" scoped>
div ::v-deep .v-input__slot input {
direction: rtl;
}
</style>