Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB select overlaps Datepicker,

Ajay S pro asked 6 years ago

I came to know z-index for select and Datepicker are same this makes issue, You can reproduce this in Angular admin template itself. Just open Datepicker and scroll page near the select where you can see the select is overlapped with datepicker. Please help ASAP,.. thanks

Damian Gemza staff answered 6 years ago

Dear Ajay S, Thanks for your report. I'm adding this to our bugs list, and we'll fix it in the future. For now, please try to add the below styles to your styles.scss file: 
mdb-select {

z-index: 0!important;

}
Best Regards, Damian

Ajay S pro answered 6 years ago

Damian & Arek, 
.picker--opened { z-index: 999 !important; } solved the issue.

thanks ..

Arkadiusz Idzikowski staff answered 6 years ago

Dear Ajay S, Did solution posted by tano work for you? Regards, Arek

Ajay S pro commented 6 years ago

Dear Arek,

No it's not, I am using simple form with datepicker next to select. Please try to bring permanent solution ASAP. 

Arkadiusz Idzikowski staff commented 6 years ago

Dear Ajay S,

We already found the problem, but unfortunately I can't provide a workaround because it is something that we need to fix on our side.

Regards,

Arek

Ajay S pro commented 6 years ago

Dear Arek,

Hmm fine, i can understand the complexity in it. please make this as higher priority and fix it in upcoming release so it'll be helpful. 

Ajay S pro answered 6 years ago

Sorry damian, It doesn't works, when I set z-index to 0 select options overlap with others labels in the form,  any other suggestion ?,  

tano pro commented 6 years ago

Try the opposite way. Works for me: 

.picker {
z-index: 10!important;
}
Anyway on the dashboard v1 page there's a rule for this, however it is not effective because it it set directly on the element too
[_nghost-c0] .mydp.picker.picker--opened{ z-index:1000}

Ajay S pro commented 6 years ago

 

Dear tano,

thanks., but it's not working.. I am using simple form with datepicker next to select. Please check with this scenario ..

 

tano pro commented 6 years ago

Ok, so I've tried it on the dashboards/v1 page and indeed 10 is not enough but .picker{z-index:100 !important;} works. If it is not working pls. set the encapsulation of your component to none or define it in the styles.*.

Ajay S pro commented 6 years ago

dear tano,

thanks for making efforts, I'll try with this and get back to you ..

Ajay S pro commented 6 years ago

tano,

.picker--opened { z-index: 999 !important; } solved the issue.

Ajay S pro answered 6 years ago

Thanks Damian :), .....  
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Dell Precision
  • Browser: Chrome
  • OS: ubuntu
  • Provided sample code: No
  • Provided link: No
Tags
select datepicker
About author
Ajay S
Pro User 45Support score
3Questions 3Answers 0Snippets