11

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?

JleruOHeP
  • 10,106
  • 3
  • 45
  • 71
rich green
  • 1,143
  • 4
  • 13
  • 31

4 Answers4

15

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 }
Pokechu22
  • 4,984
  • 9
  • 37
  • 62
satori
  • 276
  • 2
  • 4
  • 1
    TY, It doesn't work when I autoPlace: false, but when I change th eid and add css to that id it works great. Do you know if there is a way to stop it from scrolling with the screen by chance? As in stop it from being seen no matter where the user is on the page. – rich green Sep 08 '14 at 15:47
  • Just add the following code to your style: – mbehnaam May 24 '16 at 01:48
  • 3
    This is a baaaaaaaaaaaaaaaaaaaaaaad API. – trusktr May 04 '18 at 19:38
11

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>
rich green
  • 1,143
  • 4
  • 13
  • 31
2

Override CSS:

.dg.a { margin-right:60px !important; }
Yunus Eş
  • 159
  • 1
  • 3
-2

Personally I like to use:

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