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

CodePudding user response：

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