Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Framework
    2
    7
    163
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Stanley last edited by 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!

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by 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.

        S 1 Reply Last reply Reply Quote 0
        • S
          Stanley @metalsadman last edited by

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

          2019-07-01_14-44-58.png

          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by

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

            S 2 Replies Last reply Reply Quote 0
            • S
              Stanley @metalsadman last edited by Stanley

              This post is deleted!
              metalsadman 1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman @Stanley last edited by

                @Stanley looks fine on my phone/chrome.

                1 Reply Last reply Reply Quote 0
                • S
                  Stanley @metalsadman last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post