0

http://courtstatpack.com is the website where we're encountering this issue.... it's on the date selection on the left-hand side in the options panel.

Both Google Charts and Material Icons are rendering on top of the date picker (https://github.com/nickeljew/react-month-picker) as shown below...?? We've changed date pickers and the same thing still happens. Any clue why?

image

z-index doesn't change anything either, as the date picker doesn't seem to care what its z-index is.

Piper McCorkle
  • 1,044
  • 13
  • 27
ztaylor54
  • 396
  • 3
  • 15

1 Answers1

1

THE PROBLEM

The problem is the div with class Settings-settings-1316548938 which looks like this: 
.Settings-settings-1316548938 {
    position: fixed;
}

position: fixed; creates a stacking context which wraps the new stacking context that .month-picker is trying to create (using position: relative and z-index: 99999999).

Since there are not more stacking context than:

  • .MuiAppBar-positionFixed-2227438490
  • .Settings-settings-1316548938
  • .month-picker

and .month-picker is an inner stacking context from .Settings-settings-1316548938 this is causing the problem.


THE SOLUTION

Easy: 

.Settings-settings-1316548938 {
    position: fixed;
    z-index: 99; // or any other positive number
}

Why?

Because position: fixed; creates a new stacking context but without the z-index property, elements are stacked in order of occurrence.So the svg elements come after than the date picker element and that's why you need to specify the z-index on your Settings-settings-1316548938 class.

Also you must understand what I mean when I talk about stacking context. So follow the link and read the article.

Hope this helps!

Jose Paredes
  • 3,882
  • 3
  • 26
  • 50