When attempting to display my dat.gui interface with a button and textbox on top of my WebGL window, I encounter this issue:
https://i.sstatic.net/N9peP.png
The section for "Close Controls" in the dat.gui is visible, but strangely the button and textbox are not appearing. My WebGL window is created using three.js.
function initialize()
{
this.button1 = function () { alert("Hello"); };
this.text1 = "Hello World";
}
var gui = new dat.GUI({ autoPlace: false });
var div = document.getElementById('datGui');
div.appendChild(gui.domElement);
var i = new initialize();
gui.add(i, "button1");
gui.add(i, "text1");<div id="datGui">
<canvas id="canvas" style="position: absolute; background-color: black; width: auto; "></canvas>
</div>