I made my own input panel contained by a “div” element. Attacthment is the html and the problem. The problem is that , the input panel is seperated with the Babylon canvas, how could I put the input panle inside the Babylon canvas or should I say overlap on the Babylon canvas?
I’ve tried tag Dialog, but dialog tag seems not work before ios 15. And the Babylonjs’s own inputText use alert message which won’t work in some android phone.
Fixed position container in CSS with z-index set above the canvas will do it. Here is an example:
May I just add here as a matter of language, and as exposed in the above solution, that this will not place your div ‘INSIDE the canvas’. BJS does not embed css. In fact, what it does is that it makes for ‘an overlay’ ON TOP OF the canvas. It’s still independant from the BJS canvas and then needs to be hooked with the canvas/scene for interactions.
Thanks it works!
But when I use document.getElementById(“xxxx”).style.display = "inline" to show my DIV, it works on IOS 15 but not work on IOS 13, is there some limitation on IOS 13?
No limitations with CSS on iOS. Certainly not with these properties.
Try using -
display: inline-block
or
display: block
Inline element may work on some browsers but likely is the issue here.
Also because it is a DIV tag, it is block by default. I would stay in the block realm. If block is too restrictive for your use case I would use inline-block.
Yup 
It works, thanks a lot !
