How to set display for cards number on a row or set maximum


Topic: How to set display for cards number on a row or set maximum card size ?

Incremental asked 4 years ago

Hello, I'm new to Vue and MDB and I'm wondering if I miss some basics for components disposals ?

I iterate through a collection of 5 objects to display cards. Everything is fine and I have a responsive display with proportional cards if I resize my browser.

My question is relating to the full display were I have 4 objects on a row (4 cards of equal size, like in samples & not the full width) and the fifth object below of all the width (not looking like a card).

What is wrong ? Is it a page setting problem ? How to set the display with 5 or 6 cards on a row or to set the maximum size of a card ? Thanks for help on this probably stupid question.

App page :

<template>
   <mdb-container>
      <mdb-row>
         <mdb-col>
            <Menu />
         </mdb-col>
      </mdb-row>
      <mdb-row>
         <mdb-col>
            <div id="app">
                <!-- Place for my component -->
               <transition name="fade" mode="out-in">
                  <router-view :key="$route.path" />
               </transition>
            </div>
         </mdb-col>
      </mdb-row>
      <mdb-row>
         <mdb-col><Footer /></mdb-col>
      </mdb-row>
   </mdb-container>
</template>

My component page :

<template>
   <div>
      <h1>Full collection of cards</h1>
      <template>
         <mdb-container>
            <mdb-row>
               <mdb-col>
                  <mdb-card-group deck>
                     <mdb-card>
                        <mdb-view hover>
                           <a href="#!">
                              <mdb-card-image :src="image" :alt="Image" >
                              </mdb-card-image>
                              <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                           </a>
                        </mdb-view>
                        <mdb-card-body> ...... </mdb-card-body>
                     </mdb-card>
                  </mdb-card-group>
               </mdb-col>
            </mdb-row>
         </mdb-container>
      </template>
   </div>
</template>

Magdalena Dembna staff premium commented 4 years ago

Can you create a code snippet here: https://mdbootstrap.com/snippets/ to illustrate this problem? Best regards, Magdalena


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: PC
  • Browser: Firefox
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No
Tags