如何更改dat.gui下拉菜单的位置？

Question

我正在使用dat.gui，并且希望将其位置放在与顶部右侧不同的位置，最好是在覆盖three.js画布的顶部，这可以通过命令完成，还是有一些css可以达到效果?

- rich green

Answer 1

你需要一些JavaScript和CSS才能做到这一点。

GUI构造函数可以传递参数对象。您可以告诉控件不要自动放置。您还可以附加元素ID以使样式更易于处理。

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

然后用以下CSS代码来定位：

And then the CSS to place it can be something like this:

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

- satori

---

谢谢，当我将autoPlace设置为false时它不起作用，但是当我更改eid并向该id添加css时它非常好用。你知道有没有办法阻止它随着屏幕滚动而移动吗？也就是说，无论用户在页面上的位置如何，都停止它的显示。 - rich green

只需将以下代码添加到您的样式表中：<style> .main { position: absolute; top: 100px; left: 100px; } </style> - mbehnaam

这是一个很糟糕的API。 - trusktr

Answer 2

被采纳的答案回答了我的问题，但并不完全是我解决问题所想要的，因为gui会随着我在页面上向上和向下滚动而滚动。我没有为gui domElement设置ID，而是将该元素附加到我更好地控制的现有元素中。

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

Answer 3

覆盖CSS：

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

- Yunus Eş

Answer 4

就我个人而言，我喜欢使用：

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

- CrypticX