using flexbox to layout a form: gutter?

[chrschdev]

Hey,
in 0.13 of quasar, i had the possibility to use “gutter”. Now in 0.14, we have to use flexbox.

the q-select and q-input has margin top of 16px and margin bottom of 8 px, so that it looks good in vertical direction.

but i have multiple columns in 1 row, like

<div class="row">
  <div class="col-4">INPUT...</div>
  <div class="col-4">INPUT...</div>
  <div class="col-4">INPUT...</div>
</div>

i need a horizontal “spacing” between the cells.

Is there a best practice solution for it?

[rstoenescu]

Apply some padding to each <div class="col-4">

[chrschdev]

thank you for your fast answer.

in my opinion its a little bit more complex. you reduce optical form width if you only set a padding, you have to give something like a negative margin to parent container to “restore” origin optical form width. further more there is no need for padding in lower breakpoints (mobile) where every form element has its own row. in that case, the only padding is the layout-padding.

[n.taddei]

Hi @chrschdev, I have the same issue.
I’m sorry to say that, but @rstoenescu the grid system is not efficient at all. And it’s a huge problem, I need it works properly.
I hope that’ll be fixed asap, even if it seems too big for an hotfix.

I’ll wait for updates

[rstoenescu]

Pushed commit to add gutters (which will work on non flex elements too!). Will document the new CSS classes during tomorrow (27th).

@n-taddei Reading your lines I cannot help but notice that you are seriously under-estimating the new grid system or haven’t payed close attention to its docs and demo (view on desktop while resizing window). Furthermore, adding gutters does not require refactoring at all and is not a big deal anyway. It’s simply a matter of adding some CSS for those gutter classes, a similar CSS to what v0.13 had – a copy-paste of the gutter classes from v0.13 would have worked for v0.14 too

[chrschdev]

@rstoenescu i have tried your pushed commit in chrome browser

the horizontal gutter seems okay, but the vertical does not work in a clear way.

please use variable column count in your provided example in 0.14 to see wat went wrong

1. Row => col-lg-6, col-lg-6
2. Row => col-12
3. Row => col-lg-6, (col-lg-6 => nested row with col-4, col-8)

when you are below the lg, the vertical spaces between the rows are not the same.
(the padding top seems to collapse in some case with the element above)

further more, you already have added margin top and bottom for form elements or q-fields.
in addition with an additional vertical gutter space, it seems too much space.

i do not know if its the right way to handle vertical spaces in a grid system

[n.taddei]

@rstoenescu I hope my words haven’t upset you, my intention is not to say that grid system sucks. I just thought it worked like Bootstrap or Bulma’s css, and I think it’s a bit less efficient than those I mentioned.
However I found out a solution, creating a parallel row class Bootstrap style and used them as I need.

Thank you anyway! Keep in consideration to use Bootstrap’s margin/padding instead of old gutter, it’s more intuitive and efficient! Thanks for your great work!

[rstoenescu]

@n-taddei

1. Are you talking about the exact example below? If you have looked in other place, please specify it. Mind that documentation for gutter is not yet published anywhere.
   

2. Can you put code with Quasar and code with Bootstrap (btw, which version?) side by side and tell me where do you think Quasar goes wrong? Make as many examples as you need.

3. Yes, by default form components have a margin so that you won’t always need rows and gutters. If used on a row/column with gutter, then no-margin should be applied to them.

I want to eliminate any confusion as this is clearly such a case. It’s not clear from your description, at least for me, what appears to be wrong for you, as in all my tests the new gutters work correctly in all scenarios. So those side by side examples (in code, not description of them) would be good so we have a common ground to talk about.

Thank you and hope this will be a constructive talk. Contact me on Gitter if you like to speed things up.

[rstoenescu]

Some more examples with the new gutter:

[n.taddei]

@rstoenescu ok, I tried to understand new gutter. The problem is when you have multiple dimension devices.
For example if I set a gutter for 2 elements that are side by side in medium devices, but one over the other on small devices the gutter leave a space between them also in vertical mode. I don’t want that gutter instead.

[n.taddei]

Gutter works fine except at this point.

[rstoenescu]

So in your case VAT number + Timezone and Currency + Contract date are side by side on larger windows?

[n.taddei]

They are like this:

[chrschdev]

@n-taddei , thats also exactly my case where quasar seems wrong

[rstoenescu]

How about this?

[chrschdev]

this would exclude the way: i need the same vertical space in a form build with flex grid.

it looks like a workaround instead solving the problem with same margin between the rows

[rstoenescu]

You are missing the point.

On sm+ windows:

… which becomes this on xs windows:

<div>
  <div class="row sm-gutter">
    <div class="col-12">
      <q-input inverted v-model="model" class="no-margin" float-label="col-12" />
    </div>
    <div class="col-xs-12 col-sm-6">
      <q-input inverted v-model="model" class="no-margin" float-label="col-xs-12 col-sm-6 TOP LEFT" />
    </div>
    <div class="col-xs-12 col-sm-6">
      <q-input inverted v-model="model" class="no-margin" float-label="col-xs-12 col-sm-6 TOP RIGHT" />
    </div>
    <div class="col-xs-12 col-sm-6">
      <q-input inverted v-model="model" class="no-margin" float-label="col-xs-12 col-sm-6 BOTTOM LEFT" />
    </div>
    <div class="col-xs-12 col-sm-6">
      <q-input inverted v-model="model" class="no-margin" float-label="col-xs-12 col-sm-6 BOTTOM RIGHT" />
    </div>
    <div class="col-12">
      <q-input inverted v-model="model" class="no-margin" float-label="col-12" />
    </div>
  </div>
</div>

[rstoenescu]

Also check: http://beta.quasar-framework.org/components/flex-css.html#Using-Gutters
Note that demo on docs needs a polish (which I’ll do these days).

[n.taddei]

@rstoenescu Ok, I was wrong. I follow the docs and now it works properly. The problem I found appears when you mix column and row. In fact I had a column div wrapping some divs acting like columns and 2 of them were .row containing .col-{size}-{i} input wrappers.
I don’t know if I explained myself properly, however I was able to fix that. Again, many many thanks!!

[chrschdev]

@rstoenescu first thanks for your fast support on this issue.

i will try it out this day and give you feedback.

on first view, it seems strange to use cols with in addition more than 12 cols for one viewport in a row. i expect multiple container with class “row” in your example within maximum of 12 cols per row. i will test if it does matter to the origin spacing bug if i use multiple “rows” in your example