Datepicker and time selector sitting behind nav-tabs

Topic: Datepicker and time selector sitting behind nav-tabs

stu_pid pro asked 7 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

Add comment

Mikołaj Smoleński staff answered 7 years ago

0 0 Best answer

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

Add comment

SL-Tech pro answered 7 years ago

0 0 Best answer

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

Add comment

Marta Szymanska staff pro premium answered 7 years ago

0 0 Best answer

Hi, add this code to your styles:

.tab-content {
z-index: unset;
}
.nav-tabs {
z-index: 1;
}

Best, Marta

Add comment

Write

Create snippet

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

About author

stu_pid

Pro User

0Support score
1Questions 0Answers

0Snippets likes 0Snippets