Material Select opening behaviour

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Material Select opening behaviour

Jens Ober pro asked 7 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?

Jens Ober pro answered 7 years ago

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;
    }
}

Damian Gemza staff answered 7 years ago

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 7 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 7 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

Dragonnblack pro answered 7 years ago

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/

Damian Gemza staff answered 7 years ago

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

FREE CONSULTATION

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

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
Jens Ober
Pro User
20Support score
3Questions 2Answers
0Snippets likes 0Snippets