qselect is not aligned to other qselect and qinput
-
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?
-
@amoss your other elements has rules which adds a bottom space, add
bottom-spacebottom-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. thebottom-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!