using flexbox to layout a form: gutter?

[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

[rstoenescu]

@chrschdev wait for me to polish Quasar play demo

[rstoenescu]

@chrschdev Docs and demo updated. Take a look now.
If you still don’t understand the value of row wrapping, come back here and post a message. It’s also a test for me to see if Flex CSS can be grasped correctly.

One more thing: when you apply the gutter, you apply it for elements in that container alone. Whatever happens outside the container has nothing to do with gutter. And it shouldn’t influence it too, as it doesn’t makes sense. Try to understand Flex CSS and come back if docs can be improved.

Cheers,
Razvan

[chrschdev]

Hi,
i read your polished docs. i have another case which is not part of the documentation (and i do not know if its too edge case for the documentation)

        <div class="row sm-gutter">
          <div class="col-md-6"></div>
          <div class="col-md-6 gt-sm"></div>
          <div class="col-md-6"></div>
          <div class="col-md-6"></div>
        </div>

i used gt-sm because i need the opposite of the offset-md-6, not moving to the right, moving to the left.

is there a better way? or is that the way which you would recommend?

(using a new row would cause the different spacing on < md.)

all other looks fine, but i will try some more examples with my existing forms in the next hours

[chrschdev]

@rstoenescu i still wait for feedback. or is anything ok with this solution? it works fine, but i want your quasar recommended solution ;O