Topic: Choppy animation in mdb select dropdown

dxl pro asked 6 years ago


The dropdown animation for select is very choppy, especially if there's something underneath the select component. The dropdown takes almost 1 second to become opaque and usable. So user can temporarily see the things underneath the dropdown. It looks very sloppy.

itdev pro commented 6 years ago

We are facing the same issue

Dawid Adach pro commented 6 years ago

Could you please include some code or a link to live preview?

Damian Gemza staff answered 6 years ago


Hello guys, For this chopiness of animation: It's caused by opacity animation. If you want to remove case when before opacity turns to 1.0 text is still visible beneath dropdown, please head to
 _material-select.scss
file located in:
/scss/angular/pro/_material-select.scss,
and look for:
mdb-select-dropdown {} line (at end of the file)
In this selector, please change:
opacity: 0 to opacity: 1.0
This should help for you, guys.
Best Regards,
Damian

itdev pro commented 6 years ago

Will you be applying this fix to future releases?

Damian Gemza staff commented 6 years ago

We'll take a deeper look on this case to think how to solve it in right way :)

itdev pro commented 6 years ago

Did you guys implement a better solution for this. I do not like the idea of having to change your file every time I update to the latest version

Damian Gemza staff commented 6 years ago

Dear itdev, Unfortunately, we didn't implement better solution for this. We're working on solving this problem. For now, you can always put your style in global stylesheet. It won't be overwritten by our releases. Best Regards, Damian

Damian Gemza staff commented 6 years ago

I've fixed this problem right now. Solution will be available in next MDB Angular release. If you need this now, feel free to download our dev version of MDB Angular which includes every latest fixes! https://git.mdbootstrap.com/mdb/angular/ng-pro/tree/dev Best Regards, Damian

itdev pro answered 6 years ago


Start your code here
<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </div>
</div>
optionsSelect: Array<any>;         
    
    ngOnInit() { 
        this.optionsSelect = [
            { value: '1', label: 'Option 1' },
            { value: '2', label: 'Option 2' },
            { value: '3', label: 'Option 3' },
        ];
    } 

itdev pro commented 6 years ago

Any field you add below the mdb-select, you will see the animation choppiness.


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