Npm inspector css seems broken

Bugs
1

hi all i just installed the inspector using npm

using official page saying :

npm install --save-dev @babylonjs/core @babylonjs/inspector

then

import “@babylonjs/core/Debug/debugLayer”;
import “@babylonjs/inspector”;

the layout looks all wonky , large icons and overlapping. seems to be only on the left side pane, right side inspector seems fine.

any ideas whats going on

i cant really repo this now sorry , but it literally is as simple as i mentioned imported it then call show() and i get this

result :

image
image1920×1040 152 KB

2

Looks like maybe CSS from your page is styling the Inspector. Just a guess from the information given.

3

yeah i found it (my css ) :

.icon {
font-size: 24px;
line-height: 24px;
}

amd babylon div is using a class named “icon”
surely babylon can use a more tool specific style name … or is it me that should make a more app specific one lol …

ah man

4

We have plans to standardize our UI components in a way that their CSS will be local to them and not affect anywhere else, but it’s going to take a bit :sweat_smile:

1 Like