[Solved] Q-Input how to put hint on the right

[Stanley]

Dear Quasar team,

I did a demo to illustrate this issue, could you please have a look?
https://codepen.io/Stanley-549393092/pen/mdPrZEw
From this demo, I already can put the hint on the right, but it’s for all the Q-Input elements.
Could you please tell me how to do it for individual Q-Input.
Maybe this is a easy question, but I am not good at CSS. Appreciate for you help!

[dobbel]

@Stanley

you could extend q-input to create a right label version component of q-input.
https://vuejs.org/v2/api/#extends

Then use scoped style in the extended component to set the .q-field__messages to right

[dobbel]

@Stanley or just with css

<q-input v-model="f1" label="f1" hint="On the left"></q-input>
<q-input class="hint-right" v-model="f2" label="f2" hint="On the Right"></q-input>

.hint-right
  .q-field__messages
    text-align: right

[Stanley]

@dobbel Thank you so much for these two solutions.