No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

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

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

    Framework
    2
    4
    1040
    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

      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 2 Replies Last reply Reply Quote 0
      • dobbel
        dobbel @Stanley last edited by 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

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

          @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
          
          S 1 Reply Last reply Reply Quote 0
          • S
            Stanley @dobbel last edited by

            @dobbel Thank you so much for these two solutions.

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