Inspector has conflicting inline css , breaks app layout

Bugs
1

i upgraded all my babylon code and noticed opening the inspector was buggering up my layouts .

cheking the elements i see this :

image

for both left and right panels its the same. The css class declares absolute , which is perfect and doesnt break my layout , but as can be seen something in your code is creating inline css values of position:relative , which breaks my layout.

( i can obviously just force the absolute via some fixer upper css of my own using !important , but this is anyway some issue you need to look into… )

2

You’ll need something like shadow DOM API to avoid confliction of css, or prefix custom classes and ids.

3

Hello! Can you try setting overlay: true on the debug layer show options? Looking at the code, this disables the relative part: Babylon.js/packages/dev/inspector/src/inspector.ts at 78854ae7b2b8ebc36d1813c66d4be4b41b954bf0 · BabylonJS/Babylon.js · GitHub

4

thanks, worked as expected , to be honest I went and looked at the docs for the inspector but saw nothing about the options object , except embed mode. So just came here. I guess I could have gone and looked into the api docs myself and found out what other options were available. Anyway , thanks.