Làm cách nào để thay đổi vị trí của menu thả xuống dat.gui?

Question

Tôi đang sử dụng dat.gui và tôi muốn định vị nó ở đâu đó khác với phía trên bên phải, tốt nhất là ở trên cùng chồng lên canvas ba.js, điều này được thực hiện thông qua lệnh hoặc có một số css sẽ thực hiện thủ thuật ?

Answer 1

Bạn cần một số JavaScript và CSS để thực hiện việc này.

GUI constructor có thể được chuyển qua đối tượng paramaters. Bạn có thể nói điều khiển không được tự động. Bạn cũng có thể đính kèm một ID yếu tố để làm cho phong cách dễ dàng hơn

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

Và sau đó CSS ​​để đặt nó có thể là một cái gì đó như thế này:

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

Answer 2

Câu trả lời được chấp nhận trả lời câu hỏi của tôi, nhưng không phải là khá những gì tôi đã đi để giải quyết vấn đề, làm với gui di chuyển với tôi khi tôi đi lên và xuống trang. Thay vì đặt ID cho gui domElement, tôi nối phần tử vào phần tử hiện có mà tôi có thể kiểm soát tốt hơn.

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