Topic: MDB 8 - Button animates to full size
Button animates from no size to full size when appearing
<button mdbBtn color="info" [disabled]="!form.valid || form.pristine" (click)="submit()">CLICK</button>
Since it is animating it is difficult to capture yet when looking closely, it starts with bare button (styleless) then animates to regular button.
I suspect it is because the button is in a collapsible box with:
<div mdbCollapse [isCollapsed]="false" #box="bs-collapse">
Other buttons appear fine
mdb2 pro answered 6 years ago
Update:
Changing
<div mdbCollapse [isCollapsed]="false" #box="bs-collapse">
to
<div>
doesn't change
Arkadiusz Idzikowski staff answered 6 years ago
Tried to reproduce this problem on my end but without success. I added the button to the body of the element with mdbCollapse directive, just like you mentioned.
The normal button doesn't have any animation. If you mean that button 'animates' from 0 to full height then it's expected behavior caused by the collapse animation.
If the problem is related to something else please provide more details (full code, reproduction steps). A screenshot / gif would be nice in this case too.
mdb2 pro answered 6 years ago
By quickly pressing print screen I was able to capture the button initial view: https://imgur.com/a/zYSXSp6
Final state, less than a second away: https://imgur.com/a/oWxVKIB
It is very persistent, always happens when changing views
mdb2 pro answered 6 years ago
It took me a while, comparing to a similar code that didn't show said behavior
I changed some code and the final change that nailed it referred to a form inside that component.
The wokring form is conditional using:
<form [formGroup]="form" *ngIf="bShowSubmit">
while said form, with the animation on the button, is not:
<form [formGroup]="form">
Changing the statement to
<form [formGroup]="form" *ngIf="true">
disabled the animation.
WTF ?!
Arkadiusz Idzikowski staff commented 6 years ago
You didn't mention that you use *ngIf directive in the first post. Please provide full code and reproduction steps.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.0.0
- Device: NA
- Browser: NA
- OS: NA
- Provided sample code: No
- Provided link: No