Panel has z-index of 1000000, breaks tinymce editor

[gbminnock]

Hi, I am using tinymce editor on a Panel component (basically I make the panel full screen). The panel overrides the z-index of the editor disabling menus on it. tinymce has z-index of 65535, 65536 & 65537.

platform: spfx with reactjs
version information:

• @microsoft/sp-core-library@1.5.1
• @microsoft/sp-lodash-subset@1.5.1
• @microsoft/sp-office-ui-fabric-core@1.5.1
• @microsoft/sp-webpart-base@1.5.1
• office-ui-fabric-react-bundle@1.5.1
• office-ui-fabric-react@5.83.0
• office-ui-fabric-core@9.1.0
• office-ui-fabric@2.6.1
• react@15.6.2
• react-dom@15.6.2

Issue: The Panel control has a z-index of 1000000 which hides the html editors menus.
I tried to override the z-index but have been unable to.

I created a codepen for this: https://codepen.io/gbminnock/pen/aQvrqO in which it seems that the override actually works in the codepen only.

In my code however I have used

.ms-Layer.ms-Layer--fixed {
  z-index:10;
}
.root{
  z-index:10;
}

and

:global .ms-Layer.ms-Layer--fixed {
  z-index:10;
}
:global .root{
  z-index:10;
}

Both do not seem to work in react for overriding the ".root" z-index.
tks.

[kenotron]

The codepen you're using is showing the usage of OUFR v6 + React 16 which both have very different characteristics: OUFRv6 might have had a fix applied - I'll have to investigate. React 16 + OUFRv6 also meant that we started using the new React portal feature... so we'll have to see if these have been the reason of the fix.

[kenotron]

@gbminnock If you don't mind, would you create a codepen with the exact versions of react + oufr and see if you can create a repro?

[kenotron]

I've put together a 5.0 demo site locally and when I ran it, it has the same class list as what you listed above. I think what you have is more of an issue of dealing with css-loader rather than Fabric. If you can come up with a codepen repro, please list it here.

[gbminnock]

@kenotron I've loaded the correct versions into the same codepen. I don't see the issue there either. The only difference is that I am using the ":global" syntax on my project which I believes for the overriding of ms styling.

Any ideas on how I can understand what the issue is locally?

[kenotron]

All I can say is that it probably has to do with webpack configuration. Try starting by looking at whether your loader configuration is excluding or including the wrong options for those .css files. I really don't think this is a bug in Fabric - more a usage question for webpack configuration. I will let you close this issue to confirm.