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

    Q-card column not distributing equally

    Help
    2
    3
    1010
    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.
    • J
      jarvilito last edited by

      Hi, i tried to use q-card in my v-for loop, i want my card to display 4 cards per row, but its not working. I dont see any errors on my code, and i tried this in bootstrap and its working

      aecef13a-ac7c-4d14-acf3-9b24c7d05812-image.png

      here is my full component of ramen code :

      code_text
      ```<template>
      <div class="q-mt-md q-mx-sm">
       <div class="row">
         <q-badge transparent align="middle" color="amber-3">
           <span class="text-h5 text-black">Ramen</span>
         </q-badge>
       </div>
       <div class="q-pa-md row q-gutter-sm">
         <q-card
           v-for="(item,index) in items"
           :key="index"
           class="q-ma-md text-black col-xs-12 col-md-4 col-lg-3"
         >
           <q-card-section>
             <div class="text-h6">{{item.title}}</div>
           </q-card-section>
           <q-separator inset />
      
           <q-card-section>{{item.description}}</q-card-section>
      
           <img :src="item.img" height="350px" />
      
           <q-separator class="q-my-md" inset />
      
           <q-card-actions>
             <q-btn>View</q-btn>
           </q-card-actions>
           <q-card-section class="align-right">PHP {{item.price}}</q-card-section>
         </q-card>
       </div>
      </div>
      </template>
      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        @jarvilito remove the gutters (docs states it adds margins), also remove your card margin classes, wrap your q-cards inside a div instead and give it a padding.
        like this https://codepen.io/metalsadman/pen/eYmgLmy?&editable=true&editors=111

        J 1 Reply Last reply Reply Quote 1
        • J
          jarvilito @metalsadman last edited by

          @metalsadman Thanks metal man! It works

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