dat.GUI custom placement not showing

Question

So I am trying to get a dat.GUI placed on the upper right corner of the canvas using the custom placement tutorial:

Here is a codepen showing the not working custom placement: http://codepen.io/eternalminerals/pen/avZBOr

I am trying to use the custom placement property because the autoplaced dai.GUI on this page http://eternalminerals.com/testa/ is un-clickable. I think if I custom placed it to the canvas instead of the page it should work.

I tried:

var gui = new dat.GUI({ autoPlace: false });

var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);

on both the codepen and the live site, where 'my-gui-container' is 'canvas', but whenever I do this, the dat.GUI disappears completely. Maybe I have to wrap the canvas in a div? I will continue to tinker with this dat.GUI and keep you posted.

Thanks.

score 1 · Accepted Answer · edited May 23 '17 at 11:51

So this is a duplicate question: How do I change the location of the dat.gui dropdown?

I simply used the moveGui div and attached the dat.GUI to the moveGui div and used CSS to move it around. The codepen is now working!! http://codepen.io/eternalminerals/pen/avZBOr

html:

<canvas id="canvas"></canvas>
<div  class = 'moveGUI'>
</div>

css:

.moveGUI{ 
    position: absolute;
    top: 13.1em;
    right: -1em;
}

js:

var FizzyText = function() {
  this.message = 'dat.gui';
  this.speed = 0.8;
  this.displayOutline = false;
  this.explode = function() { console.log('test'); };
  // Define render logic ...
};

$(document).ready(function( $ ) {
  var text = new FizzyText();
  var gui = new dat.GUI({ autoPlace: false });
  gui.add(text, 'message');
  gui.add(text, 'speed', -5, 5);
  gui.add(text, 'displayOutline');
  gui.add(text, 'explode');
  gui.domElement.id = 'canvas';
  var customContainer = $('.moveGUI').append($(gui.domElement));
});

dat.GUI custom placement not showing

1 Answers1