Vuetify: Feature request: Right-justify the content and label of a <v-text-field>

[valpet]

Most financial software have a need for numeric/currency text fields. Those text fields are by convention right-justified. Today that seems impossible to fix easily with Vuetify without resorting to overriding the style

Example:
<v-text-field v-model="withdrawal" label="Withdrawal" justify-right />

[iec989]

Is there any ETA on this?
Thanks

[paulpv]

Can't you just <v-text-field style="text-align:right"...>?

[valpet]

This feature request and #4006 are not duplicates. #4006 requests having the label moved to the left, outside of the textfield.

I want the text of the underlying input field right justified, aligned to the right-side border of the input field. For esthetic purposes, the label should align to the same side.
This is what it looks like now:

This is how I want it to look like:

Adding a text-align: right to the component as suggested do not solve the issue. It needs to be done on the underlying input field but I am not happy about having to override the styles of the components myself as that may lead to maintenance issues further down the road.

I checked out #3531 but could not quite determine if that would help me. I tried adding right as an attribute to my component but that did nothing. I'm on version 1.0.18

[lowerends]

Can this be reconsidered? I agree with the comment by @valpet .

[jacekkarczmarczyk]

What exactly? https://codepen.io/anon/pen/VBZXxw
Please create a new issue if this codepen is not what you're expecting

[lowerends]

Maybe the reverse property is good enough, as long as you keep in mind that it also reverses the prefix and suffix. Not sure if this is the intended behaviour or a bug. If you think this is a bug, I would be happy to create an issue with a codepen for it.

[jacekkarczmarczyk]

Not sure if it's a bug, but even if it's intended then it should be fine to create a feature request to reverse only the label and input text leaving icons where they are now, so please do

[lowerends]

Alright, I created a feature request in #4552.
Cheers!

[ihteshamqazi]

Is there any update on this issue.

[mouadsah]

Hi,
you can solve this issue for v-text-field by adding this style code :

if you using scss :

.v-text-field__slot {
input {
text-align: right;
}
}

or if you using css :

.v-text-field__slot input {
text-align: right;
}

for v-select you can fix this by adding this style code :

.v-select__selection {
width: 100%;
justify-content: flex-end;
}

[filipgorczynski]

Hello,
@mouadsah it works perfectly if scss styles are not scoped in the component. But if they are following rule is created:

.v-text-field__slot input[data-v-40cefe54] {
   text-align: right;
}

which is obviously incorrect. Better version would be:

.v-text-field__slot[data-v-40cefe54] input {
   text-align: right;
}

and input element has no data property on it.
Anyway, it would be nice to have some alignment options for rendered parts.

[mouadsah]

Hello,
@filipgorczynski Yes absolutely

[johnleider]

Future updates can be tracked from https://github.com/vuetifyjs/vuetify/issues/4552