What is the correct way to create a button in a Panel?

JupyterLab
#1

When I create the button as shown below and add it to a StackedPanel or BoxPanel, it gets inline styling applied to it that I cannot replace using this.node.style; the button gets stretched to the edges of the panel.

I have a hunch that I am doing this wrong. Does it even make sense to do this? Should I not use Widgets in order to create buttons? Or, is there a way to override the inline styling that gets applied to Widgets?

export class ButtonWidget extends Widget {

    constructor(options = { node: document.createElement('button') }) {
        super(options);
    this.node.textContent = 'Clickme';
    this.node.style.height = '10px'; //  This doesn't get applied.
}
#2

I discovered that lumino has a sophisticated layout system that can be configured by passing a Layout to the constructor of the container. :slight_smile: It doesn’t seem like this is well documented.

Anyhow, the problem was that I trying to put this ButtonWidget into a StackedLayout. I fixed this by making the container subclass Panel, which doesn’t seem to do anything to the inline CSS - which makes sense.

1 Like