Angular collapse not resizing correctly

Topic: Angular collapse not resizing correctly

Alberto pro asked 6 years ago

Hello, the Angular collapse panel is not resizing correctly when the data to display comes from the component. It works correctly with static content but that kind of defeats the whole angular project. I had to resort to using the mat-accordion control from angular material to have a working collapsible panel. Please advise as when the bug will be fixed as i don't want a million different frameworks for may app. Cheers, Alberto

Dawid Adach pro commented 6 years ago

Hi Alberto, looking into this. Will come back to you as soon as we will get more information on that. Could you please meanwhile provide us with the input data which you use? Are they anyhow specific? Long strings etc?

Alberto pro commented 6 years ago

Hi, it's just a paragraph of user comments retrieved with an observable e.g. Toggle collapse {{card.userComment}}

Add comment

salman1793 pro answered 6 years ago

0 0 Best answer

Hi all, I am sorry that I have to comment here, but I think I am facing a similar problem. Can I get Some help on this issue? Regards, Salman Mujtaba

Dawid Adach pro commented 6 years ago

Dear Salman, have you tried provided workaround?

Add comment

Alberto pro answered 6 years ago

0 0 Best answer

<pre class="code-toolbar language-markup"><code class=" language-markup"></code></pre>
<div>
<div>
<div>Sorry code not showing in comments</div>
</div>
<div></div>
<div>
<div><div class="row"></div>
<div><div *ngFor="let card of data "class=" col-sm-6 col-md-4 col-lg-3 mt-2 mb-4"></div>
<div><code class=" language-markup"><span class="token tag"><span class="token punctuation">
<</span>button <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn btn-primary waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test.toggle()<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span></code></div>
<div><code class=" language-markup">
    Toggle collapse
<span class="token tag"><span class="token punctuation"></</span>button<span class="token punctuation">></span></span>
</code></div>
<div><code class=" language-markup"><span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">[mdbCollapse]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>isCollapsed<span class="token punctuation">"</span></span> <span class="token attr-name">#test</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bs-collapse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">>{{card.userComment}}</span></span><span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></code></div>
</div>
</div>
</div>

</div>

Please insert min. 20 characters.

Sorry code not showing in comments


<button class="btn btn-primary waves-light" type="button" (click)="test.toggle()" mdbRippleRadius>


    Toggle collapse
</button>

<div class="" [mdbCollapse]="isCollapsed" #test="bs-collapse">
    <p>{{card.userComment}}</p>
</div>

</div> </div>

Dawid Adach pro commented 6 years ago

Dear Alberto, could you please share this sample via email : d.adach@mdbootstrap.com or some pastebin ? I am not sure what card.userComment is about

Alberto pro commented 6 years ago

The angular component exposes an array collection of objects as in data = Array. It is populated in ngInit by calling a service and subscribing to the returned Observable collection. The CardObject is a POCO that exposes several properties including userComment. Does this clarifies a bit? Cheers, Alberto

Dawid Adach pro commented 6 years ago

Dear Alberto, can you call resize() after populating comments ? What is the result?

Add comment

Dawid Adach pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi Alberto, please try this, update collapse.driective.ts with the following function:

public resize():void {
constcontainer=this._el.nativeElement;
this.maxHeight=this._el.nativeElement.scrollHeight;
this._renderer.setElementStyle(container, 'height', this.maxHeight+'px');
}

And once after updating the content, please call the following function. i.e. :

@ViewChild('test') myCollapse;
[...]

this.myCollapse._el.nativeElement.innerHTML='Anim pariatur ....';
this.myCollapse.resize();

This will set the height of the new collapse to a proper size.

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

Alberto

Pro User 22Support score
17Questions 11Answers 0Snippets