Dat GUI - size and position of menu (javascript / css) -


i trying use dat gui add controls three.js project. , feel of controls provided dat gui. however, having problems positioning menu within page. need centre menu horizontally , vertically , set custom width , height menu. surely must possible?

currently trying following. menu centering horizontally, working. not centering vertically (its stuck top of page) , size of menu not changing @ (the width , height parameters have no effect).

can me out this?

javascript:

var gui;  var menuclass = function()  {     this.speed = 0.5; };  var themenu = new menuclass();  gui = new dat.gui(); gui.domelement.id = 'gui_css';  gui.add(themenu, 'speed', -5, 5); 

css:

#gui_css  {         position: absolute;      left: 50%;     top: 50%;      width: 400px;     height: 200px; } 

try: add div container dat.gui element

<div id="gui_container"></div>

then in code

var gui = new dat.gui({ autoplace: false }); gui.domelement.id = 'gui'; gui_container.appendchild(gui.domelement); 

and in styles

#gui_container{   position: absolute;   top: 50%;   left: 50%; } #gui{   transform:translate(-50%, -75px); } 

note, -75px in transform:translate(-50%, -75px); means gui.domelement has no height attribute , set translation y-axis approximately half of height see on screen.

jsfiddle example


Comments

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -