No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

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

    How to vertically stretch elements in a table grid?

    Help
    2
    4
    612
    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.
    • W
      wpq last edited by

      I am using a table in grid style to represent a set of monitoring events. I almost get what I want, except that the content of the element is shrinked vertically to its content. I would like it to take the whole height of the line:

      d66c6964-c9cf-4ccb-8f83-de51a64768f8-image.png

      The red anchored arrows show how I would like to stretch the elements.

      I thought that items-stretch would be the solution but wherever I put it, it does not vertically stretch th eelements.

      For reference, the code which builds the elements is below, I would be grateful for any help. I was trying to fit item-stretch in the line <div class="q-pa-xs col-grow col-lg-3 col-xs-12"> (effect on children) or <q-card :class="cardColor(props.row.isOK)"> (effect on each element individually)

      <q-table
            grid
            :data="resultsToShow"
            :columns="columns"
            row-key="name"
            bordered
            :hide-pagination="true"
            :rows-per-page-options="[0]"
            :pagination.sync="pagination"
          >
            <template v-slot:item="props">
              <div class="q-pa-xs col-grow col-lg-3 col-xs-12">
                <q-card :class="cardColor(props.row.isOK)">
                  <q-card-section class="text-center">
                    <strong>{{props.row.monitor}} → {{props.row.target}}</strong>
                    <span v-if="!props.row.isOK"> ({{when(props.row.when)}})</span>
                    <q-badge floating v-if="!props.row.isOK">{{props.row.counter}}</q-badge>
                  </q-card-section>
                  <div v-if="!props.row.isOK">
                    <q-separator />
                    <q-card-section>
                      {{props.row.why}}
                    </q-card-section>
                  </div>
                  <div v-else>
                    <div class="text-center" v-if="props.row.extra !== ''">{{props.row.extra}}</div>
                  </div>
                </q-card>
              </div>
            </template>
          </q-table>
      
      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        @wpq that won’t do it, better take a look at the masonry example.

        1 Reply Last reply Reply Quote 0
        • W
          wpq last edited by wpq

          @metalsadman you mean that what I am trying to achieve is not doable at all? That would be sad 🙂

          I actually started from the masonry version but I want to avoid the ragged look (just have identical elements on one line)

          Or maybe that I should not go the table way, but just iterate over elements manually?

          metalsadman 1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman @wpq last edited by metalsadman

            @wpq you still ran into the problem of empty spaces, should understand the layout section of the docs, and dig into masonry layouting. Probably check for components in the wild if there’s one that automates staggered grid items, without writing much css.

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