[Solved] [V1] QInput - How to put the label on the left

Stanley

As in V0.17.x, we can use QField to put the label on the left. See below example.

<q-field
  icon="wifi"
  icon-color="amber"
  label="Field label"
  helper="Some helper"
>
  <q-input v-model="email" type="email" suffix="@email.com" />
</q-field>

So, on V1, how can I do that, thanks!

metalsadman

@Stanley what do you mean label on the left? coz that example definitely doesn’t put label on the left, maybe you meant stacked? https://codepen.io/metalsadman/pen/Zdrwer?&editable=true&editors=101.

Stanley

@metalsadman Please see below picture from https://v0-17.quasar-framework.org/quasar-play/android/index.html#/showcase/forms/field. But in V1, QField seems not support that.
Could you please give me an alternative solution, thanks!

metalsadman

@Stanley QInput is already wrapped inside a QField, what you could do is wrap a QField and QInput inside a div, updated https://codepen.io/metalsadman/pen/Zdrwer?editors=1010.

Stanley

This post is deleted!

metalsadman

@Stanley looks fine on my phone/chrome.

Stanley

@metalsadman Yes, it’s a good workaround. Thanks a lot!