How to best implement a resizable widget

[almarklein]

Thanks for the awesome library!

I was wondering about the output DOM element, the el in render({ model, el }) { ... }. What assumptions can we make of it, and to what degree can we 'use' it, like setting its style or adding css classes?

In jupyter_rfb this element is currently used to set the size of the widget, and also to make it resizable, but the Jupyter notebook, and especially VSCode, seem to reset certain inline style fields, which looks to me like a hint that this is a bad idea.

So my plan is to instead use another container to implement the sizing. But for certain things to work, the output element (the el) should be position: relative. Is this something we can assume, or set? What's considered good practice?

[manzt]

Great question! The short answer is: you can't make many assumptions about el beyond it being an HTMLElement.

el is not created or managed by anywidget. It's provided by the host platform (Jupyter Notebook, JupyterLab, VS Code, marimo, Colab, etc.). Each platform creates and manages that element differently, so anywidget intentionally makes no guarantees about its styling, positioning, or behavior beyond the AFM spec, which just says it's an HTMLElement that represents your widget's display area.

This means things like position, display, sizing behavior, and whether inline styles get reset are all platform-specific. The behavior you're seeing (VS Code resetting certain inline styles) is a good example of why relying on properties of el itself can be fragile.

What I'd recommend: treat el as an opaque mount point. Create your own container inside it and style that however you need:

function render({ model, el }) {
  const container = document.createElement("div");
  container.style.position = "relative";
  // ... all your sizing/resizing logic on `container`
  el.appendChild(container);
  
  return () => {
     // can cleanup any listeners if necessary
  }
}

This way you own the full styling context and aren't at the mercy of what each platform does (or undoes) to el. Your plan to use another container for sizing sounds exactly right.

[almarklein]

Thanks! I was asking because jupyter_rfb used the el as a container, adding style to it etc. I've now moved away from that and indeed created a dedicated container inside el.

[almarklein]

For those interested in an example implementation:

• Relevant JS: https://github.com/pygfx/renderview/blob/f90b530fe19fecf88e15ad121cea2369d594b5ed/src/renderview.js#L295-L381
• The CSS: https://github.com/pygfx/renderview/blob/main/src/renderview.css

In the browser: