dat.GUI styling (Angular threejs)

Questions
1

I have a dat.GUI window in my component. The window is fixed to top right position. I tried to style it with css to margin-top of 100px but it doesn’t work. The reason being for the margin is because some part of the dat.GUI is overlapped by the navbar.

 private API = {
    offsetX: 0,
    offsetY: 0,
    repeatX: 0.25,
    repeatY: 0.25,
    rotation: Math.PI / 4,
    centerX: 0.5,
    centerY: 0.5
  };


initGui() {
    this.gui = new GUI();
    this.gui.domElement.id = 'gui';
    this.gui.add(this.API, 'offsetX', 0.0, 1.0).name('offset.x').onChange(() => this.updateUvTransform());
    this.gui.add(this.API, 'offsetY', 0.0, 1.0).name('offset.y').onChange(() => this.updateUvTransform());
    this.gui.add(this.API, 'repeatX', 0.25, 2.0).name('repeat.x').onChange(() => this.updateUvTransform());
    this.gui.add(this.API, 'repeatY', 0.25, 2.0).name('repeat.y').onChange(() => this.updateUvTransform());
    this.gui.add(this.API, 'rotation', -2.0, 2.0).name('rotation').onChange(() => this.updateUvTransform());
    this.gui.add(this.API, 'centerX', 0.0, 1.0).name('center.x').onChange(() => this.updateUvTransform());
    this.gui.add(this.API, 'centerY', 0.0, 1.0).name('center.y').onChange(() => this.updateUvTransform());
  }
//initGUI() is initialised inside textureloader.

I also tried to set {autoplace: false} and bind the gui to a div element (with id) in html and style it but it doesn’t work either.
The autogenerated div element from dat.GUI has class(dg main a) and styling works if done via the chrome developer tools but if I try to do the same from the css file it doesn’t work.

2 
    this.gui.domElement.style.marginTop = '100px';

Tried to style it directly from the initGui function and it worked…

1 Like