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!


Topic: MDBTimepicker showing behind modal

aidysproule free asked 3 years ago


Expected behavior MDBTimepicker should show in front of the modal when opened.

Actual behavior MDBTimepicker is hidden behind the modal when opened.

I had the same issue with the MDBSelect and fixed it with the code below which I found on here. div[data-popper-reference-hidden="false"] { z-index: 1070; }



I'm seeing this same bug with 1.4.0 mdb5-react-ui-kit-pro-advanced.


Krzysztof Wilk staff commented 3 years ago

Thanks for reporting that, maybe some changes had an influence on this. We'll check it as soon as possible.


aidysproule free answered 3 years ago


Hi, Problem still occurring with BETA 6. Time picker is still showing up behind the modal. When I close the modal the timepicker is visible.

Also just to add that I'm using the datepicker on the same modal and it works ok.


Krzysztof Wilk staff commented 3 years ago

Could you deploy your project using our MDB CLI (you can check it here: https://mdbootstrap.com/docs/standard/cli/quick-start/) to show me your problem? I can't recreate it - when I'm using opened modal with opened time picker everything looks fine, z-index of these components looks good, so it's hard to say something without a code :)

Keep coding!


Krzysztof Wilk staff answered 3 years ago


Hi!

There was a problem on our side. I'm sorry for that inconvenience. Now you should be able to download the latest package (MDB React UI Kit Pro Essential 1.0.0-beta6). Please, check if this problem still occurs and if not - write back :)

Keep coding!


aidysproule free answered 3 years ago


Still the same issue with the css code above. In my downloads I only have access to download MDB5-REACT-UI-KIT-Pro-Essential-1.0.0-beta2. Where can I get the latest version?


Krzysztof Wilk staff answered 3 years ago


Hi!

Today we released a new version, so it should be fixed. If this problem still occurs - please write about it here. In this case, you can use scss like before and add this piece of code:

   .timepicker-modal {
       z-index: 1070 !important!;
    }

Keep coding!


aidysproule free answered 3 years ago


Is there any work around as it's something I need to get working for my project, rather than waiting on a new release


Krzysztof Wilk staff answered 3 years ago


Hi!

Thanks for spotting that bug! We'll fix it in the next release :)

Keep coding!



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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta2
  • Device: N\\A
  • Browser: N\\A
  • OS: N\\A
  • Provided sample code: No
  • Provided link: No