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 comman

Solution 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 }

Solution 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:

<divclass = 'moveGUI'></div>

Solution 3:

Override CSS:

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

Solution 4:

Personally I like to use:

function datgui(){
    let gui = new dat.GUI({
        width : 300
    });