Floating button flipped toggle

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Floating button flipped toggle

salman1793 pro asked 6 years ago

Hi, I see that the fixed buttons have their toggles flipped.
<div class="fixed-action-btn button-position" (mouseleave)="fixed.toggle()">
<aclass="btn-floating btn-small purple-gradient waves-light"mdbWavesEffect(mouseenter)="fixed.toggle()">
<iclass="fa fa-user-circle"></i>
</a>
<divclass="fixed_collapse"[mdbCollapse]="isCollapsed"#fixed="bs-collapse">
<a(click)="goToGitHub()"class="btn-floating btn-small btn-git waves-light"mdbWavesEffect><iclass="fa fa-github"></i></a>
<a(click)="goToLinkedIn()"class="btn-floating btn-small btn-li waves-light"mdbWavesEffect><iclass="fa fa-linkedin"></i></a>
<a(click)="goToFacebook()"class="btn-floating btn-small btn-fb waves-light"mdbWavesEffect><iclass="fa fa-facebook"></i></a>
<ahref="#top-section"class="btn-floating btn-small red waves-light"mdbWavesEffectmdbPageScroll[pageScrollDuration]="500"><iclass="fa fa-arrow-up"></i></a>
</div>
</div>
Could you please help mee fix it?

Arkadiusz Idzikowski staff answered 6 years ago

Dear salman1793, Please try this code: 
<div class="fixed-action-btn button-position" (mouseleave)="fixed.toggle()" style="top: 45px; left: 24px;">

<aclass="btn-floating btn-small purple-gradient waves-light"mdbWavesEffect="fixed.toggle()">

<iclass="fa fa-user-circle"></i>

</a>

<divclass="fixed_collapse" [mdbCollapse] [isCollapsed]="true" #fixed="bs-collapse"style="bottom: auto">

<a (click)="goToGitHub()"class="btn-floating btn-small btn-git waves-light"mdbWavesEffect><iclass="fa fa-github"></i></a>

<a (click)="goToLinkedIn()"class="btn-floating btn-small btn-li waves-light"mdbWavesEffect><iclass="fa fa-linkedin"></i></a>

<a (click)="goToFacebook()"class="btn-floating btn-small btn-fb waves-light"mdbWavesEffect><iclass="fa fa-facebook"></i></a>

<ahref="#top-section"class="btn-floating btn-small red waves-light"mdbWavesEffectmdbPageScroll

[pageScrollDuration]="500"><i class="fa fa-arrow-up"></i></a>

</div>

</div>
Regards, Arek

salman1793 pro answered 6 years ago

Hi Arek,   No, this doesn't help me. I wonder what has changed cause it used to work fine.

Arkadiusz Idzikowski staff answered 6 years ago

Dear salman1793, There were some changes in the animation of the collapse component. Could you describe what is the behavior that you are trying to achieve and what are the exact problems? Regards, Arek

salman1793 pro answered 6 years ago

Hi Arek, The buttons should be toggled off when we first land on the page. Only Mouseenter event should open the tray and Mouseleave should close it. But, now, the toggle action has been flipped. The icons are by default open when I land on the page. Mouseleave opens it whereas mouseenter closes it, which is not the desired behaviour.  

Arkadiusz Idzikowski staff answered 6 years ago

We are already aware of that bug and it will be fixed in next version. For now please use [isCollapsed]="true" input on the div with mdbCollapse directive and please let me know if that helps.

salman1793 pro answered 6 years ago

Sorry, doesn't work. The same problem exists with the collapse section.

salman1793 pro answered 6 years ago

Also, when a new version of MDB Angular comes out, how can I update my current project?

Arkadiusz Idzikowski staff answered 6 years ago

Dear salman1793, Did you check if that problem still exist in new version? You can find update instruction in our documentation: Update instructions Regards, Arek
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
button
Related topics
3
input type submit reacts only on double clic
2
Calendar buttons submit forms
1
Button autosize after animation
1
Round buttons not working
1
Mixin "make-button" issues
About author
salman1793
Pro User
77Support score
9Questions 7Answers
0Snippets likes 0Snippets