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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- 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
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