Topic: MDB-Collapse
Aroquiassamy LA ROZE priority asked 5 years ago
Hi @Damian,
I'm using Collapse inside which I'm using a CARD where before the update the card layout works fine but after I Updated to 7.4.2 the card layout goes.
Resources (screenshots, code snippets etc.) When I Clicked that Button the Below content must show within a card collapse is working but CARD Layout is not working within a Collapse Component
Code
<button mdbBtn type="button" color="secondary" rounded="true" size="sm" mdbWavesEffect class="z-depth-2" (click)="advancesearch.toggle()">
<mdb-icon fas icon="filter" class="pr-1 secondary-text"></mdb-icon>Advance Search
</button>
Filter Options
Search Close
Damian Gemza staff answered 5 years ago
Dear La Roze,
Okay, now I know what's has changed there.
With the 7.4.2, there was a change in the collapse (added overflow: hidden style). This overflow is hiding the box-shadow of cards.
As a workaround, please add a below styles (default box-shadow from .card) to your styles.scss file. We'll try to fix this problem with the next release.
#open-content {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
Best Regards,
Damian
Aroquiassamy LA ROZE priority answered 5 years ago
I didn't Change Anything I just Updated to 7.4.2 from 7.4.1.After that I can't be able to find the CARD Style Inside the Collapse Content....kindly check with your Previous Version and the current one.
Damian Gemza staff answered 5 years ago
Please also describe your problem. What has changed between your previous version of MDB and the latest version?
Aroquiassamy LA ROZE priority answered 5 years ago
<section id="button">
<button mdbBtn type="button" color="secondary" rounded="true" size="sm" mdbWavesEffect class="z-depth-2" (click)="open.toggle()">
<mdb-icon fas icon="filter" class="pr-1 secondary-text"></mdb-icon>Open
</button>
</section>
<section id="open-content">
<div class="" mdbCollapse #open="bs-collapse">
<mdb-card>
<mdb-card-body>
<mdb-card-title>
<div class="d-flex py-2">
<div class="mr-auto">
Lorem Ipsum
</div>
<div class="ml-auto">
<a mdbTooltip="close" placement="top">
<mdb-icon fas icon="times-circle" (click)="open.hide()"></mdb-icon>
</a>
</div>
</div>
</mdb-card-title>
<hr>
<div class="row py-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat neque et ex auctor aliquam.
Fusce id odio accumsan libero auctor eleifend at vitae elit. Integer fermentum purus augue, sit
amet pharetra odio laoreet et. Pellentesque pellentesque nisl non leo tempor congue. Etiam iaculis
eros ante, et venenatis diam vestibulum eu. Maecenas nec risus accumsan, facilisis nibh id,
malesuada justo. Quisque eget ex lacus. Praesent dapibus pulvinar sem, non accumsan neque aliquet
quis.</p>
<p>Nam iaculis in arcu at suscipit. In a urna sollicitudin, volutpat sem in, tincidunt metus. Nullam
at risus tincidunt, semper mi sed, vulputate velit. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Vestibulum aliquet pellentesque lorem, sit amet fringilla urna hendrerit id.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis
venenatis sem a elit auctor pharetra. Donec quam risus, mollis sit amet posuere quis, pulvinar eget
ante.</p>
</div>
</mdb-card-body>
</mdb-card>
</div>
</section>
Damian Gemza staff answered 5 years ago
Dear La Roze,
Please provide me the full code which causes you those problems. Without it, I won't be able to help you well.
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 7.4.2
- Device: Lenova
- Browser: Chrome 72
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes