MDB-Collapse

web
mobile

Aroquiassamy LA ROZE pro premium asked 11 months 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

https://imgur.com/7Br9nde

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 11 months 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


Aroquiassamy LA ROZE pro premium answered 11 months 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 11 months ago

Please also describe your problem. What has changed between your previous version of MDB and the latest version?


Aroquiassamy LA ROZE pro premium answered 11 months 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 11 months 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.4.2
  • Device: Lenova
  • Browser: Chrome 72
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes