One day later, I found the text color and background color both are white,I don’t know why and how to fix it.
This is probably due to a CSS conflict. Can you try to disable all your CSS to confirm?
1 Like
You are right! Thank you very much. The UI plugin setting conflicted.
1 Like
@Deltakosh When I use babylonjs in a pre-existing project that uses materializecss, the inspector-host’s tabs panel is not rendered at all its length is set to something very small (like 8 pixels) as seen in the chrome developer tools.
The repro is pretty simple:
Add the following lines to any babylonjs application (package.json contains:“materialize-css”: “^1.0.0”,:
import ‘…/node_modules/materialize-css/dist/css/materialize.min.css’
import ‘…/node_modules/materialize-css/dist/js/materialize.min.js’
I think it would be better if babylonjs, since it contains embedded GUI controls, uses non-generic names for css class names. May be ‘bjs_tabs’ instead of ‘tabs’. I think this would be more and more of an issue as babylonjs is more widely used.
I tried rebuilding materializecss to add a namespace but that is a much larger, more intrusive on the existing project (Add namespace to prevent CSS class name collisions? · Issue #5597 · Dogfalo/materialize · GitHub). Plus the upstream materializecss is not seeing much development.
In the short term what would you advise?
If you think I should make specific pointed changes to a private fork of babylonjs/inspector, could you please give some pointers. But this is the last resort.
I am ok with using the tip of the ‘main’ branch if you think the fix at your end is easy to do.
Just found another instance : Debuglayer CSS is not compatible with Bulma
@0x53A how did you solve your issue (bulma vs inspector)?
I think a lot of our css have been moved to anonymously generated names. @carolhmj could have a look as I think she moved some of them ?
Unfortunately not on all projects, only on part of the Node Editor 
We want to move everything to CSS Modules but not enough time to go over all projects
@Dan_T do you have a current first set of css we could update to unlock you ?
Thanks for taking a look at this issue.
I hacked materializecss to rename ‘tabs’ there so that I can use the inspector. But this is obviously not a medium/longer term solution for us.
For my case, the offending bit is:
inspector tabs
I think the inspector component would be a good start followed by the scene explorer.
At least, this will help workaround your immediate issue until the full module approach has been adopted Workaround Tabs css name conflict by sebavan · Pull Request #13374 · BabylonJS/Babylon.js · GitHub
3 Likes