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
Post a Comment