Material Select opening behaviour

Topic: Material Select opening behaviour

Jens Ober pro asked 6 years ago

I use the mdb-select. The select in my application does not open as smoothly as in your demo on material-select. In this screen recording you can see the difference. What is the preferred way to get rid of that delay? I did not find any appropriate configuration option in the documentation. When the select dropdown is showing up, it is hidden by the card component for a short moment. Is there a way to avoid that ugly effect?

Add comment

Jens Ober pro answered 6 years ago

0 0 Best answer

Solution, as suggested by Damian but added the following styles to global stylesheet “styles.scss” located in /src directory:

mdb-select {
    mdb-select-dropdown {
        transition: 0.055s;
    }
}

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hey guys, This problem will be fixed in next release of MDB Angular. You can now find it on our GitLab dev branch! Feel free to upgrade and test. Best Regards, Damian

Add comment

Dragonnblack pro answered 6 years ago

1 0 Best answer

Hello,

it's a bug that was reported a while ago but it doesn't look like it's going to be fixed

https://mdbootstrap.com/support/mdb-pro-angular-select-problem/

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

Hello Jens Ober, 1st question: You can change animation speed by editing /assets/scss/angular/pro/_material-select.scss file (start from line 387). 2nd question: You can change opacity in the same file which you can edit your animation speed. Just head into /assets/scss/angular/pro/_material-select.scss file, and change line 392 from 0 to 1. Best Regards, Damian

Jens Ober pro commented 6 years ago

Hi Damian, Thank you for your reply. Your solution works. But editing the files under /assets/scss/angular/pro is not an option for me. Those changes will not be tracked by our version control. And I suppose they will be gone after the next update. Regards, Jens

Damian Gemza staff commented 6 years ago

So instead of editing our core files, you can add this style to your global stylesheet. It won't be overwritten by next update. Best Regards, Damian

Add comment

Closed

This topic is closed.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

Jens Ober

Pro User 20Support score
3Questions 2Answers 0Snippets