Inspector windows is not displaying correctly

Bugs
1

i have application with the babylonjs and react, when i open inspector in the application, it is not displaying correctly. and also some of the properties are not displaying correctly

please see the screen shot

error
error1896×804 408 KB

2

error2
error21380×648 55.8 KB

3

This doesn’t have anything to do with Babylon, your CSS is overriding styling used by Babylon. You may need to set styling explicitly to get it to work. I had this issue with my react app as well.

4

I always start my projects with this

#scene-explorer-host{
z-index: 1000 !important;
position: absolute !important;
}

#inspector-host{
z-index: 1000 !important;
position: absolute !important;
}

5

But these errors are not connected to the actual styling (I think).

The toFixed() method converts a number into a string, rounding to a specified number of decimals.

I had this before (and I didn’t solve it). And it happen when I set some values myself (like values for material properties, metallic, roughness, specularPower and so on).

So with that said, I think that in my case, when I am setting something from slider I’ve built in the app, I am actually setting property to string (so like, setting material.roughness = “0.57”). And (string).toFixed is not possible, as toFixed needs number input, and when it gets string, you get “toFixed is not a function”.

You can see that here (lines 26-30);
https://www.babylonjs-playground.com/#BCXKBP#1

So if you are setting something yourself in the app, check the types of the inputs you are giving. I think that actually in the scene itself, this is not a problem, as it somehow converts/reads “0.57” as number and you can see the effect of your setting in the scene. But for inspector .toFixed is called, and that makes it crash (and I think that your inspector get’s lost and you need to refresh the app to see inspector again properly).