SplitPanel has 0 width and height

[pplonski]

I'm trying to use SplitPanel in a widget that is used in Jupyter Lab extension. I'm able to add SplitPanel and it is displayed in the html source but it has width and height 0.

Below is the class that I'm displaying:

export class PPPanel extends Panel {
  constructor(options: PPPanel.IOptions) {
    super();
    this.addClass('jp-Notebook');
    this.addClass('jp-NotebookPanel-notebook');
    this.addClass('grid-panel');

    this.node.dataset['jpUndoer'] = 'true';

    this._context = options.context;
    this.rendermime = options.rendermime;
    this.contentFactory = options.contentFactory;
    this.mimeTypeService = options.mimeTypeService;
    this._editorConfig = options.editorConfig;
    this._notebookConfig = options.notebookConfig;

    // this one is displayed alone ok if uncommented
    // const t = document.createElement('div');
    // t.textContent = 'Ola koduje3';
    // const a = new Widget({ node: t });
    // this.addWidget(a);

    const splitPanel = new SplitPanel();
    splitPanel.id = 'my-split-panel';

    const left = new Panel();
    const right = new Panel();

    const t1 = document.createElement('div');
    t1.textContent = 'Ola koduje4';
    const a1 = new Widget({ node: t1 });
    left.addWidget(a1);

    const t2 = document.createElement('div');
    t2.textContent = 'Ola koduje5';
    const a2 = new Widget({ node: t2 });
    right.addWidget(a2);

    splitPanel.addWidget(left);
    SplitPanel.setStretch(left, 0);

    splitPanel.addWidget(right);
    SplitPanel.setStretch(right, 1);

    this.addWidget(splitPanel);
  }

Here is screenshot showing html source:

Node with text content is in the html source but it is not displayed. I expect that SplitPanel will show both texts.

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[krassowski]

Thanks for reporting! There is something wrong with propagation of resize events. Two workarounds you could try to get unlocked (but this would ideally work out of the box):

• (a) calling splitPanel.update() at the end, or with a delay of zero
• (b) overriding contain to none before adding widgets

[pplonski]

Thank you @krassowski!

• I've tried to call splitPanel.update() at the end of constructor but with no success.
• What do you mean by overriding contain, should I create new class derived from SplitPanel?

Maybe there is some other Panel class that can be used to split Panel into sidebar and main view? Can it be done with simple Panel and css?

[krassowski]

Something like left.node.style.contain = 'none'; and right.node.style.contain = 'none';

[pplonski]

Thank you! Still nothing ...

Screenshot:

Code:

    const splitPanel = new SplitPanel();
    splitPanel.id = 'my-split-panel';

    const left = new Panel();
    const right = new Panel();
    left.node.style.contain = 'none';
    right.node.style.contain = 'none';

    const t1 = document.createElement('div');
    t1.textContent = 'Ola koduje4';
    const a1 = new Widget({ node: t1 });
    left.addWidget(a1);

    const t2 = document.createElement('div');
    t2.textContent = 'Ola koduje5';
    const a2 = new Widget({ node: t2 });
    right.addWidget(a2);

    splitPanel.addWidget(left);
    SplitPanel.setStretch(left, 0);

    splitPanel.addWidget(right);
    SplitPanel.setStretch(right, 1);

    this.addWidget(splitPanel);
    splitPanel.update();

[krassowski]

It looks like the contain: strict is still on the screenshot, so it is either overridden later, or the extension changes were not picked up.

[pplonski]

It must be overridden later, I set it more times in the code:

    const splitPanel = new SplitPanel();
    splitPanel.id = 'my-split-panel';

    const left = new Panel();
    const right = new Panel();
    left.node.style.contain = 'none';
    right.node.style.contain = 'none';

    const t1 = document.createElement('div');
    t1.textContent = 'Ola koduje4';
    const a1 = new Widget({ node: t1 });
    left.addWidget(a1);

    const t2 = document.createElement('div');
    t2.textContent = 'Ola koduje5';
    const a2 = new Widget({ node: t2 });
    right.addWidget(a2);

    splitPanel.addWidget(left);
    SplitPanel.setStretch(left, 0);

    splitPanel.addWidget(right);
    SplitPanel.setStretch(right, 1);

    this.addWidget(splitPanel);
    left.node.style.contain = 'none';
    right.node.style.contain = 'none';
    splitPanel.update();
    left.node.style.contain = 'none';
    right.node.style.contain = 'none';

Screenshot

[erkin98]

It looks like the contain: strict is still on the screenshot, so it is either overridden later, or the extension changes were not picked up.

it is not picking up changes, does SplitPanel depends on parent size?