MDB 8 - Button animates to full size

web
mobile

Topic: MDB 8 - Button animates to full size

mdb2 pro asked 3 months ago

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 3 months ago

Update:

Changing

  <div mdbCollapse [isCollapsed]="false" #box="bs-collapse">

to

<div>

doesn't change


Arkadiusz Idzikowski staff answered 3 months 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 3 months 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 3 months 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 3 months ago

You didn't mention that you use *ngIf directive in the first post. Please provide full code and reproduction steps.


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No
Tags