scrollbar and resize examples

[michael-erskine]

I'm not very bright with CSS and I've been trying to recreate the dat.GUI features of automatic scrollbar when overflowing and resize width by using a container. Everything I've tried has failed so far and it's all rather embarrassing! Is there an example out there, that anybody knows of, where tweakpane can be given scroll and resize abilities?

[cocopon]

Similar issue: #98 If this doesn't resolve your issue, could you share a demo or an example of the behavior of dat.GUI?

[michael-erskine]

Yes, I had found #98 but the example is no longer there (404).

The demo would be to create a long dat.GUI pane and you can resize it by dragging the left edge and use the mouse wheel to scroll parts of it into view. e.g. : -

import "./styles.css";
const DatGui = require("dat-gui");

document.getElementById("app").innerHTML = `
<h1>Hello Vanilla!</h1>
<div>bla, bla, bla </div>
`;
const dagui = new DatGui.GUI();
const pob = {
  aplha: 33.0,
  beta: 33.0,
  gamma: 33.0,
  delta: 33.0,
  epsilon: 33.0,
  cats: 9,
  dogs: 9,
  chickens: 9,
  bats: 9,
  guns: 100,
  swords: 100,
  teapots: 100,
  bananas: 12,
  kiwis: 12,
  grapes: 12,
  plums: 12,
  tangerines: 12
};

for (const p in pob) {
  dagui.add(pob, p);
}

[cocopon]

Both of those features are out of scope of Tweakpane, so you should implement them yourself.

1. Scrolling

You should set height and overflow: scroll of the pane container (default value: .tp-dfwv). For example:

:root .tp-dfwv {
  position: fixed;
  overflow: scroll;

  top: 0;
  bottom: 0;
  right: 0;
}

2. Resizing

It is more complicated than the previous one so I won't show the actual code. In my expectation, you have to add an element into the edge, handle mouse events, and then apply changes to the pane container width. Some search keywords like js element resize drag may help you.

[michael-erskine]

Yes, out of scope, I fully understand. I've been using jquery-resizable-dom on a container to make the Tweakpane horizontally resizable but then giving the container a fixed vertical size to allow overflow scrolling (by tying to the bottom) covers part of my three.js canvas so it cannot respond to mouse events.

I'll keep trying to come up with something that works, and I'll post it here if useful to others using tweakpane to replace dat.GUI, but I'm just not very smart with CSS.

I was just hoping there was a less hacky way of achieving these dat.GUI built-in features.