qselect is not aligned to other qselect and qinput

amoss

Here is the problem:

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

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

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

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

amoss

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

bottom-slots

You got that right, thanks a lot!