Hillardo Posted December 13, 2017 Share Posted December 13, 2017 Hello, I just started to work with Babylonjs. I want to include my scene inside a HTML page and use HTML elements for the input. But every time I focus the render canvas, the other HTML parts disappear, and the render canvas fill the entire screen. Is it possible to prevent this or should I use the GUI from Babylonjs for the input? Quote <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } #input{ height:20%; } </style> </head> <body> <div id="input"> <form> Eingabe:<input type="text" id="Uinput" > //Text input Schriftgröße:<input type="number" id="Sizeinput" value="48" >//Fontsize input </form> </div> <div> <canvas id="renderCanvas"></canvas> </div> Quote Link to comment Share on other sites More sharing options...
Arte Posted December 13, 2017 Share Posted December 13, 2017 Hi @Hillardo Place canvas after body <body> <canvas id="renderCanvas"></canvas> <div id="input"> .......... Quote Link to comment Share on other sites More sharing options...
Hillardo Posted December 13, 2017 Author Share Posted December 13, 2017 Thank you @Arte This solved my problem, but only on my big screen. On the smaller screen of my laptop I can only see the rendercanvas. What is the reason that the rendercanvas must be placed there? Quote Link to comment Share on other sites More sharing options...
Arte Posted December 13, 2017 Share Posted December 13, 2017 Works for me on big/small screen's. Try empty/clear cash Quote Link to comment Share on other sites More sharing options...
Hillardo Posted December 15, 2017 Author Share Posted December 15, 2017 empty/clear cash and another browser didn't help, but now the CSS code for defining the height in pixel works. Arte 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.