CSS in inspector V2

Questions
1

Hi,

I think it could be great to give a name to the top div of the inspector which is visible in front of the canvas because in some cases, the inspector is hidden by some other divs. So if we want to change the CSS and give a z-index, it will be easier. Today this div has classes which are not very easy to read.

image

image
image381×664 19.8 KB

Maybe cc @ryantrem again ??? :innocent:

1 Like
3

Everything in Inspector v2 is under a single div with the id babylon-inspector-container, so you can use that to apply any custom styling.

Another option for your specific case is to create your own container div, style it and attach it to the DOM wherever it makes the most sense for your use case, and pass that container div into the options when you show the inspector. This will give you full control of where and how Inspector shows up on your page. I would expect that is a bit more direct and maybe simpler than trying to apply custom styles, but I think either approach should work.

1 Like
4

No, i’m sorry but it is not possible to use the babylon-inspector-container div and give it a z-index which is the first layer because this div is enclosing the entire canvas.

In my case, there are some other elements of the DOM that are in front of the canvas and that will be disabled because the main inspector div is in front of them.

The need is to give a z-index to the inspector div which is really visible but this div has no id.

5

Got it! Exposing more element ids is possible but has some problems:

  • It starts getting into implementation details that might change.
  • if you apply your own css and you want it to also work when the side panels are popped out into child windows, you will also need to find a way to apply your css in the child windows.

It would be good to explore some other options before going that route. I think a good thing to try out in your scenario is to pass the overlay: true option to debugLayer.show, and possibly the globalRoot option as well. Overlay will simply overlay Inspector rather than re-hosting the canvas, and global root let’s you provide the parent/container element for Inspector. I suspect these two options together will likely let you inject Inspector into the DOM at a layer that works well for your app.

6

Ok, I understand that it won’t be as easy as i thought.

But maybe you can help without changing anything. The div has 7 classes with “weird” names (see the picture above).

Can you give me the name of one of these classes in which I can give a z-index = 9999 in my CSS ?

Thanks very much for your help

7

I think there is no guarantee that they will stay the same. Guessing that these are put out by the build script (sth like scoped css). So you would have to potentially adapt your code after every update :o

Does the globalRoot option not work for you? Because then you know

<aside id="myCustomInspectorRoot" />

But also that

#myCustomInspectorRoot > div

beats specificity so you can override however you want.

1 Like