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: angular datepicker behind tabs

riccy pro asked 7 years ago

datepicker as you can see, the top of the datepicker is behind the tabset. any ideas how to solve this? thank you.

id90travel pro answered 6 years ago

This is still an issue with us too. Please look into it. Changing the z-index of the picker does not matter. The issue is because the picker is a child of the tabs and setting the z-index does not matter because the context of the picker is already below the tabs.

 

 

Damian Gemza staff commented 6 years ago

Dear id90travel, Please head into /scss/pro/_tabs.scss and comment line 42 (z-index: 1). This should fix your problem. I will include that solution to next release. Best Regards, Damian

riccy pro answered 7 years ago

The problem still exists.  This thread: https://mdbootstrap.com/support/problem-date-picker-with-tab-nav-tab-tab-content-card/ made me try to remove the  [contentClass]="'card'" and replace it with [contentClass]="''". Now the datepicker is no more behind the nav tabs. Could you please investigate this behaviour?

Damian Gemza staff commented 7 years ago

Hmmm, that's strange.. We've tested this case, and we haven't got any problems with datepicker. Could you send me your project without any changes with [contentClass] and without node_modules @ d.gemza@mdbootstrap.com ? i'll investigate that. Best Regards, Damian

riccy pro answered 7 years ago

thanks for the suggestion but unfortunately this didn't work.

Rafał Rogulski free commented 7 years ago

Hi, Please send my your project on my email: r.rogulski@mdbootstrap.com, I will look whats is wrong. Regards

Rafał Rogulski free answered 7 years ago

Hi, Try to give higher z-index on date picker and it backdrop: 
.picker {
  z-index: 9999;
}
Regards
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

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
About author
riccy
Pro User 21Support score
3Questions 7Answers 0Snippets