dat.gui 드롭 다운의 위치는 어떻게 변경합니까?

Question

dat.gui를 사용 중입니다. 오른쪽 상단과 다른 위치에 배치하고 싶습니다. 상단에서 삼각형 모양의 캔버스를 겹쳐서 사용하는 것이 좋으며, 명령을 통해 수행 할 수 있습니다. 또는 트릭을 수행 할 CSS가 있습니다. ?

Answer 1

이렇게하려면 JavaScript 및 CSS가 필요합니다.

GUI 생성자는 paramaters 객체를 전달할 수 있습니다. 컨트롤을 자동 배치하지 않도록 설정할 수 있습니다. 또한

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

쉽게 스타일링 할 요소 ID를 첨부 할 수 있습니다 그리고 다음 CSS 그것을 이런 식으로 뭔가 할 수 있습니다 배치 :

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

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> 

Answer 3

무시 CSS :

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