How to align v-text-field label using reverse tag in Vuetify.js?

user_13697559 0
Viewed 731

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↓ enter image description here

I want to fix the border space to label position. Does anyone advise me,please?

nuxt.js vuetify.js vue.js sass
1 Answers

If you need to use reverse (for some other reason), repositioning the label is possible with the following styles:

  1. Override the left and right position of the .v-label to 0 and auto, respectively.

  2. The gap seen on the border is implemented with a <legend> element. Override its width (which is dynamically calculated at runtime) with auto (may need specific width adjustment based on the label's actual width); and set its margin-left to 10px.

<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>

demo 1

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>

demo 2

user_62771510
Related