How to change dat.gui dropdown list location?

Question

I am using dat.gui and I would like to position it somewhere different than the top right, preferably in the upper overlap of the canvas three.js, is this done using commands or is there some kind of css that will do the trick?

Answer 1

For this you need JavaScript and CSS.

The GUI constructor can be passed the paramaters object. You can say that the control should not be included. You can also attach an item id to simplify styling.

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

And then the CSS for placing it might be something like this:

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

Answer 2

The accepted answer answers my question, but not quite what I went to to solve the problem, to make scrolling with gui with me when I go up and down the page. Instead of setting an identifier for gui domElement, I added an 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; }