Topic: Datepicker and time selector sitting behind nav-tabs

stu_pid pro asked 4 years ago


Hey - I'm trying to include a datepicker and time selector in a set of nav-tab panels. When you activate them they are both hidden behind the nav-tabs. I've tried maxing out the z-index but it has no effect Thanks    

Marta Wierzbicka staff answered 4 years ago


Hi, add this code to your styles: .tab-content { z-index: unset; } .nav-tabs { z-index: 1; } Best, Marta

SL-Tech pro answered 4 years ago


Hi, I've the same question.

I've simply created a Tab's Selector, than in a Tab, I've put a DatePicker .
The DatePicker goes behind the head of Tab's Selector, and the Tab's Selector remain clickable.
It would be disabled by dark mask.

No CSS customization, only vanilla MDB

Screenshot no customization

Screenshot z-index:1 on Tab's Selector

With z-index:1 the content go over the the Tab's Selector, so we've to take another way


SL-Tech pro commented 4 years ago

I've used the https://mdbootstrap.com/components/tabs/#basic-example to build the tabs No problem with https://mdbootstrap.com/components/tabs/#classic-tabs

Mikołaj Smoleński staff answered 4 years ago


Hi, Please share Your nav-tab panel code here, it would be much easier to fix that issue having Your exact code. Regards

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

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags