I’m building an extension that adds a right panel element and having issues with layout and positioning. In this case I figured a picture is worth a thousand words.
I’m trying to do two things:
- Set the blue panes both to absolute positions with a fixed height at the top and bottom of the panel.
- Allow set the blue sections to fixed height and then allow the middle portion (orange) to grow to the remaining size of the viewport.
I have implemented the containers using a series of panel widgets I"ve tried a number of different options (including BoxPanel/StackedPanel with different *Layout(s)) but the positioning and height elements are stumping me. I can’t seem to find any classes or API surface in the exported Lumino widgets that allows positioning/height setting. Furthermore, attempts to style the widgets using CSS directly (either via their DOM properties in JS or directly in CSS has proven unsuccessful since the widget position and height/width appear to be set dynamically by Jupyter through the style tag directly on the <div> container.
Any suggestions on the approach here? Should I give up on Lumino widgets and build my own DOM elements?