CODEWITHSUNDEEP
javascriptdat.gui
rich green
rich green

Reputation: 1213

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?

Upvotes: 13

Views: 16398

Answers (4)

CrypticX
CrypticX

Reputation: 11

Personally I like to use:

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

Upvotes: -2

Yunus Eş
Yunus Eş

Reputation: 267

Override CSS:

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

Upvotes: 2

rich green
rich green

Reputation: 1213

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>

Upvotes: 14

satori
satori

Reputation: 326

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 }

Upvotes: 18

Related Questions