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

    q-field & q-input issue on v1.1.0

    Help
    2
    4
    79
    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.
    • M
      mas last edited by mas

      I’m trying q-field and q-input combination on v1.1.0:

            <q-field
            :value="username"
            class="col-12"
            label="lemail"
            id="emailField"
            filled >
              <template v-slot:control>
                <q-input  
                class="col-12"
                v-model="username" 
                clearable
                color="orange"
              />
            </template>
            </q-field>
            
            <q-field
             :value="username"
             label="password"
             id="passField"
             filled
             class="col-12">
              <template v-slot:control>
                <q-input
                class="col-12"
                  v-model="password" 
                  color="indigo"
                  type="password"
                  clearable
                />
              </template>
            </q-field>
      

      And I have at least 2 issues so far. 1. double-inderline 2. double fill-box (from ‘filled’ property). Moving the ‘filled’ property from q-field to q-input component removes the second box, but the float-label floats up outside the fill-box boundary then. Removing the <template v-slot:control> wrapper fixes the double-undeline issue but I figure this is not the right way at all. Did anyine have similar issues?

      I found a similar topic dealing with double-inderline after update but I’m using a brand new project.

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        QInput is already wrapped internally by QField. You shouldn’t need to wrap it again.

        Scott

        1 Reply Last reply Reply Quote 1
        • M
          mas last edited by

          Oh, my bad(( That’s written on pink…Thank you! I could do without q-field actually but I found that in the new version Quasar generates a custom id on every q-input element, like ‘id="qf_3061d64c-aa2d-4392-7fcf-6e019645a100’. With the previous Quasar version I used to add my own Id property either to QField or QInput which was very convenient to run quick tests. Adding my own id to QInput won’t overwrite the one genetated by Quasar (but it for works for QField). So I assume it’s not a good idea to attempt to do so at all as Quasar needs its own generated ID for better control over components…

          1 Reply Last reply Reply Quote 1
          • M
            mas last edited by

            This post is deleted!
            1 Reply Last reply Reply Quote 0
            • First post
              Last post