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

    qselect is not aligned to other qselect and qinput

    Framework
    2
    5
    506
    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.
    • A
      amoss last edited by

      Here is the problem:
      Untitled.png

      Here is the code

      <q-card-section horizontal class="row no-wrap q-pt-none">                      
         <q-select class="col-5" autofocus rounded outlined v-model="..." :options="..." label="..." :rules="[ val => val && val.length > 0 || '...']"/>            
         <q-space/>
         <q-input class="col-3" v-model="..." rounded outlined label="..." style="text-transform: uppercase" :rules="[ val => val && val.length > 0 || '...']"/>              
         <q-select class="col-3" rounded outlined v-model="..." :options="..." emit-value map-options/>
      </q-card-section>
      

      The first qselect and input are aligned beautifully, the second qselect refuses to get in line. When inspecting the element, I see a

      .self-stretch { align-self: stretch;}
      

      in the css that is checked, if I uncheck it, it aligns with the others. Not sure why it affects only the second qselect. If I move the problematic qselect to be the first, it’s still not aligned… as if it took it personally… Am I missing something?

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

        @amoss your other elements has rules which adds a bottom space, add bottom-space bottom-slots for the other select that dont have rules.

        1 Reply Last reply Reply Quote 0
        • A
          amoss last edited by amoss

          Oh man, I should have thought of that… that was the only difference to the other qselect 😞
          Maybe I misunderstood you but bottom-space didn’t change anything so I just added rules to the second qselect and Voilà!
          Thanks!

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

            @amoss yea i remembered it wrong, it’s actually bottom-slots. you don’t need to add rules if you’re not gonna give it one anyway. the bottom-slots props should do it.

            A 1 Reply Last reply Reply Quote 0
            • A
              amoss @metalsadman last edited by

              @metalsadman said in qselect is not aligned to other qselect and qinput:

              bottom-slots

              You got that right, thanks a lot!

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