Accordion/collapse

Topic: Accordion/collapse

2KLIC pro asked 7 years ago

Accordion is not working. no idea why ?

Add comment

Damian Gemza staff answered 7 years ago

Dear 2KLIC,Please notice, that in our documentation Accordion is builded in this way:

<mdb-squeezebox [multiple]="false" aria-multiselectable="true">

<mdb-item *ngFor="let item of itemsList">

<mdb-item-head> {{ item.title }} </mdb-item-head>

<mdb-item-body> {{ item.description }} </mdb-item-body>

</mdb-item>

</mdb-squeezebox>

Please try to use this schema. If it won't work, we'll think about other solutions.

Please insert min. 20 characters.

Dear 2KLIC, Please notice, that in our documentation Accordion is builded in this way:

<mdb-squeezebox [multiple]="false" aria-multiselectable="true">

<mdb-item *ngFor="let item of itemsList">

<mdb-item-head> {{ item.title }} </mdb-item-head>

<mdb-item-body> {{ item.description }} </mdb-item-body>

</mdb-item>

</mdb-squeezebox>

Please try to use this schema. If it won't work, we'll think about other solutions.

2KLIC pro commented 7 years ago

yes I am using the same code, and i upgrade it to angular 5, still the behaviour is same. please get back with the solution. I am blocked because of this i can not move further.

Damian Gemza staff commented 7 years ago

Please, send me your's project without node_modules at d.gemza@mdbootstrap.com I'll investigate this.

2KLIC pro commented 7 years ago

ok, let me figure it out first, if it is still not working, i will share the code.

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Hello 2KLIC,

Please check if you have copied everything well.

I'm suggesting to check your's app.component.ts if contains code below:
<pre class="code-toolbar language-javascript"><code class=" language-javascript">public itemsList:Object[] = [
 {
 title: 'Collapsible Group Item #1',
 description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.'
 },
 {
 title: 'Collapsible Group Item #2',
 description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.'
 },
 {
 title: 'Collapsible Group Item #3',
 description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.'
 }
 ]</code></pre>
Best Regards,

Damian

Hello 2KLIC,Please check if you have copied everything well.I'm suggesting to check your's app.component.ts if contains code below: public itemsList:Object[] = [ { title: 'Collapsible Group Item #1', description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.' }, { title: 'Collapsible Group Item #2', description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.' }, { title: 'Collapsible Group Item #3', description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.' } ] Best Regards,Damian

Please insert min. 20 characters.

Hello 2KLIC, Please check if you have copied everything well. I'm suggesting to check your's app.component.ts if contains code below:

public itemsList:Object[] = [
        {
            title: 'Collapsible Group Item #1',
            description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.'
        },
         {
            title: 'Collapsible Group Item #2',
            description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.'
        },
         {
            title: 'Collapsible Group Item #3',
            description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.'
        }
    ]

Best Regards, Damian

2KLIC pro commented 7 years ago

every single element or pro components are working fine, i am pretty sure about my code and component file. i checked the classes reflecting or not but classes on actual site are different that is the only cause, accordion is not working.

Damian Gemza staff commented 7 years ago

2KLIC, could you provide me code of your's accordion and component.ts file ? It should works fine, because i've copied sample code from documentation and it works perfectly.

2KLIC pro commented 7 years ago

.accordion { background: #fff; width: 100%; display: block; list-style-type: none; overflow: hidden; height: 40px; padding: 0; } this class getting applied, if i comment height in inspect then it is working bit ok

Damian Gemza staff commented 7 years ago

Please provide me your's environment configuration (os, browser, angular version, mdb version etc...).

2KLIC pro commented 7 years ago

it is ubuntu, angular 4.3.6, browser i checked are firefox and chrome, mdb-version": "5.1.1"

Damian Gemza staff commented 7 years ago

MDB is compatible only with Angular 5.x. Please update your's angular and check again if it works. Regards, Damian

2KLIC pro commented 7 years ago

for mdb site <pre><div class="accordion"> <div class="card"></div> <div class="card"></div> </div></pre> code is like but for me it is like <pre><mdb-squeezebox> <div class="accordion"> <mdb-item><div class="card"></div></mdb-item> <mdb-item><div class="card"></div></mdb-item> </div> </mdb-squeezebox></pre>

2KLIC pro commented 7 years ago

but earlier it was working fine, i don't think it is angular version issue. 1 month back when i started using mdb with angular 4 it was working. i did not update my code since then.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

2KLIC

Pro User 0Support score
6Questions 0Answers 0Snippets