Search code examples
javascriptdat.gui

How do I change the location of the dat.gui dropdown?

I am using dat.gui, and I would like to position it somewhere different than the top right, preferably at the top overlapping a three.js canvas, is this accomplished through commands, or is there some css that will do the trick?

Solution

  • You need some JavaScript and CSS to do this.

    The GUI constructor can be passed a paramaters object. You can tell the control not to be autoplaced. You can also attach an element ID to make styling easier

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

    And then the CSS to place it can be something like this:

    #gui { position: absolute; top: 2px; left: 2px }