qselect is not aligned to other qselect and qinput



  • 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?



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



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



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



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

    bottom-slots

    You got that right, thanks a lot!


Log in to reply