How to build rows within a column?



  • Summary

    With the approach described below, I see this:

    62b1b84b-025a-4f41-bfaf-8424da73a010-image.png

    I expected to see that:

    c280028d-779a-4280-bbf3-18ad24901622-image.png

    Rationale

    The general structure of the page is as follows (MainLayout from the generated skeleton):

    <template>
      <q-layout view="lHh Lpr lFf">
        <q-page-container>
          <q-page>
            <div class="row">
              <div class="col">
                <currentTime></currentTime>
                <currentDate></currentDate>
                <q-btn @click="$q.dark.toggle()"></q-btn>
              </div>
            </div>
          </q-page>
        </q-page-container>
      </q-layout>
    </template>
    

    I read that code as : within q-page I have a row, then in this row I have a column made out of the components currentTime and currentDate

    (… so far so good, I see the expected stack of time and date …)

    currentDate is

    <template>
      <div class="shadow-box shadow-10 text-h5 q-pa-md">
          {{now.toLocaleString({weekday: 'long'})}} {{now.toLocaleString({day: 'numeric'})}} {{now.toLocaleString({month: 'long'})}}
      </div>
    </template>
    

    … so I expected it to take the width of the column it is in (the one mentioned above), which width is driven by the size of the components (in my case the time is wider than the date).

    This component, however, expands beyond the column it is in → which is the part I do not understand.

    I think I have a fundamental misunderstanding of the layout system - I would be grateful for a pointer to the right direction.



  • If you have only “col”, the div takes up the whole 12 sections of the row, so all of the space. Your two components probably have some sort of width limiting css. If they didn’t, then they too would spread across the screen.

    The whole layout system in Quasar is based on Flexbox. Once you get it, (and it aint that easy to get), then it is easy. 😛

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Scott



  • Thanks for your help @s-molinari

    None of the components have CSS. I wanted to update my post with the content of currentTime but the edit window is over so I put it here (it is just testing, though the ugly repetition of classes)

    <template>
        <div class="row">
            <div class="shadow-box shadow-10 text-h1 text-weight-bolder q-pa-md align-right text-green-5">{{hour}}</div>
            <div class="shadow-box shadow-10 text-h1 text-weight-bolder q-pa-md " >{{minute}}</div>
        </div>
    </template>
    

    I am a purely amateur dev but I wrote for home use several pages based off flexbox (and I am glad Quasar uses this). Your comment about col is great - what I fail to understand is why one component is “self-width-limiting” and the other one expands.

    I can got for a col-5 or similar to fix the width, though I would prefer the components to place themselves (c c c q-space c c → which would put three components on the left, then space between them , and two on the right - especially that I will have some components which appear dynamically).

    I will investigate further, thanks for the hint.



  • What is the div with the row class doing?

    Scott



  • Adding col-auto did the trick (I do not yet know why both components are not treated equal)

    <div class="col-auto">
                <currentTime></currentTime>
                <currentDate></currentDate>
                <q-btn @click="$q.dark.toggle()"></q-btn>
              </div>
    


  • @s-molinari my page is a set of rows, and each row has a variable number of “blocks” (such as the date and time in the example). The general idea is:

    <q-page>
            <div class="row">
              <div class="col-auto">
                <currentTime></currentTime>
                <currentDate></currentDate>
                <q-btn @click="$q.dark.toggle()"></q-btn>
              </div>
    <!--          another div in that row-->
    <!--          and another one-->
            </div>
    <!--        another div div with row (and subsequent structure)-->
    <!--        and another one-->
          </q-page>
    

    Ultimately I want to replace with quasar my home dashboard which is a bit old now (you can see the different “layers” of information):

    6d9a4050-c457-4ad4-ab7e-781c585e930d-image.png


Log in to reply