Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    using flexbox to layout a form: gutter?

    Help
    3
    25
    8468
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • rstoenescu
      rstoenescu Admin last edited by

      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 🙂

      N 1 Reply Last reply Reply Quote 2
      • C
        chrschdev last edited by 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

        1 Reply Last reply Reply Quote 0
        • N
          n.taddei @rstoenescu last edited by

          @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!

          1 Reply Last reply Reply Quote 1
          • rstoenescu
            rstoenescu Admin last edited by 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.
              0_1498563317785_Screenshot from 2017-06-27 14:33:02.png

            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.

            1 Reply Last reply Reply Quote 0
            • rstoenescu
              rstoenescu Admin last edited by

              Some more examples with the new gutter:

              1_1498565238115_Screenshot from 2017-06-27 15:03:44.png 0_1498565238114_Screenshot from 2017-06-27 15:06:08.png

              N 1 Reply Last reply Reply Quote 0
              • N
                n.taddei @rstoenescu last edited by

                @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.

                0_1498568174554_Cattura.PNG

                1 Reply Last reply Reply Quote 0
                • N
                  n.taddei last edited by

                  Gutter works fine except at this point.

                  1 Reply Last reply Reply Quote 0
                  • rstoenescu
                    rstoenescu Admin last edited by

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

                    N 1 Reply Last reply Reply Quote 0
                    • N
                      n.taddei @rstoenescu last edited by

                      They are like this:

                      0_1498568799093_Cattura2.PNG

                      1 Reply Last reply Reply Quote 0
                      • C
                        chrschdev last edited by

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

                        1 Reply Last reply Reply Quote 1
                        • rstoenescu
                          rstoenescu Admin last edited by

                          How about this?

                          2_1498576108612_Screenshot from 2017-06-27 18:06:58.png 1_1498576108611_Screenshot from 2017-06-27 18:07:22.png 0_1498576108610_Screenshot from 2017-06-27 18:07:26.png

                          1 Reply Last reply Reply Quote -1
                          • C
                            chrschdev last edited by 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

                            1 Reply Last reply Reply Quote 0
                            • rstoenescu
                              rstoenescu Admin last edited by

                              You are missing the point.

                              On sm+ windows:
                              1_1498581309896_gutter-sm.png

                              … which becomes this on xs windows:
                              0_1498581309896_gutter-xs.png

                              <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>
                              
                              1 Reply Last reply Reply Quote 0
                              • rstoenescu
                                rstoenescu Admin last edited by 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 1 Reply Last reply Reply Quote 0
                                • N
                                  n.taddei @rstoenescu last edited by

                                  @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!! 🙂

                                  1 Reply Last reply Reply Quote 0
                                  • C
                                    chrschdev last edited by

                                    @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

                                    1 Reply Last reply Reply Quote 0
                                    • rstoenescu
                                      rstoenescu Admin last edited by

                                      @chrschdev wait for me to polish Quasar play demo 😉

                                      1 Reply Last reply Reply Quote 0
                                      • rstoenescu
                                        rstoenescu Admin last edited by

                                        @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

                                        1 Reply Last reply Reply Quote 0
                                        • C
                                          chrschdev last edited by

                                          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

                                          1 Reply Last reply Reply Quote 0
                                          • C
                                            chrschdev last edited by

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

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post