Help with spacing rows
-
This is my current code:
<q-page padding class="row items-center"> <div class="col-12"> <div class="row justify-center"> <div class="col-6"> <q-input class="q-ma-sm" dark v-model="text" label="Username or Email" /> <q-input class="q-ma-sm" dark v-model="text" type = "password" label="Password" /> <q-btn class="q-ma-sm" color = "secondary" label="Log In" /> </div> </div> <q-space></q-space> <hr> <div class="row justify-center"> <div class="col-6"> <div class="row justify-center"> <div class="col-12"> <q-input class="q-ma-sm" dark v-model="text" label="Display Name" /> <q-btn class="q-ma-sm" color = "secondary" label="Create Game" /> </div> </div> <div class="row justify-center"> <div class="col-12"> <div class="row"> <q-btn class="q-ma-sm" color = "secondary" label="Join Using ID" /> <q-btn class="q-ma-sm" color = "secondary" label="Join Random" /> </div> </div> </div> </div> </div> </div> </q-page>
I tried using q-gutter but it doesn’t seem to be working. Is there a quasar way to do this or is my only option to override the CSS and manually set a large margin?
Any help would be appreciated!
-
- remove
<q-space></q-space>
because it does nothing in your case (it is only for horizontal gaps, I think) - add the class
q-gutter-y-xl
to the div in line 2
Explanation:
That div contains three elements (two divs and the <hr>) which you want to space out. Whenever you want to add equal spacing between all elements, using a q-gutter class on the container does the trick (except when working with cols, then it’s q-col-gutter, see https://quasar.dev/layout/grid/gutter).(Alternatively, you could manually add margins to your rows or the separator, for example
q-my-xl
on the <hr> or the divs, but the gutter method is better)Also, consider replacing
<hr>
with<q-separator />
. - remove