How do I change the location of the dat.gui dropdo

Question

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?

Answer 1

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 }

Answer 2

The accepted answer answers my question but is not quite what I went for to solve the problem, do to the gui scrolling with me when I go up and down the page. Instead of setting an ID for the gui domElement, I appended the element to an existing element which I can control better.

css:

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

JS:

// Create GUI   
    gui = new dat.GUI( { autoPlace: false } );
    {
        // create fill and open folders
    }
    var customContainer = $('.moveGUI').append($(gui.domElement));

HTML:

<div  class = 'moveGUI'>
</div>

Answer 3

Override CSS:

.dg.a { margin-right:60px !important; }