using flexbox to layout a form: gutter?

[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

[rstoenescu]

@chrschdev the solution is perfectly fine. Would you care to make a PR to add this to docs pls?