Topic: Angular collapse not resizing correctly

Alberto pro asked 7 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 7 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 7 years ago

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

salman1793 pro answered 6 years ago


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?

Alberto pro answered 7 years ago


Sorry code not showing in comments
<div class="row">
<div *ngFor="let card of data "class=" col-sm-6 col-md-4 col-lg-3 mt-2 mb-4">
<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 7 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 7 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 7 years ago

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

Dawid Adach pro answered 7 years ago


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.


Please insert min. 20 characters.

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
Tags