social floating buttons did not look like mdb style


Topic: social floating buttons did not look like mdb style

Rehab Othman asked 4 years ago

Expected behavior![i need to use this style: https://mdbootstrap.com/docs/angular/components/buttons-social/Actual behavior*after use code it looks like thatenter image description here*Resources (screenshots, code snippets etc.)


Grzegorz Bujański staff commented 4 years ago

Hi. How can we recreate this issue? Please provide the code that causes the malfunction.


Rehab Othman commented 4 years ago

I added code in .ts file cause this issue and once I removed it every thing is ok.

This code I removed was for mdb component (Multi-item carousel gallery) so if I need to use both in same page I can not. so can u check please this section what I am talking about: ngAfterViewInit() { const buttons = document.querySelectorAll('.btn-floating'); buttons.forEach((el: any) => { this.renderer.removeClass(el, 'btn-floating'); this.renderer.addClass(el, 'px-3'); this.renderer.addClass(el.firstElementChild, 'fa-3x'); }); }


Grzegorz Bujański staff answered 4 years ago

This code may actually cause this error in this case. Try this solution:

ngAfterViewInit() {
  const buttons = this.elRef.nativeElement.querySelectorAll('.btn-floating');
  buttons.forEach((el: any) => {
    this.renderer.removeClass(el, 'btn-floating');
    this.renderer.addClass(el, 'px-3');
    this.renderer.addClass(el.firstElementChild, 'fa-3x');
  });
}

Rehab Othman commented 4 years ago

still have same issue after used your code


Grzegorz Bujański staff commented 4 years ago

Your code for buttons and carousel is in the same component? Try to isolate the carousel as a separate component.


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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.0.0
  • Device: labtop
  • Browser: chrome
  • OS: windows 10 pro
  • Provided sample code: No
  • Provided link: Yes