-
-
Notifications
You must be signed in to change notification settings - Fork 128
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SplitPanel has 0 width and height #675
Comments
Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗 |
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):
|
Thank you @krassowski!
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? |
Something like |
Thank you! Still nothing ... 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(); |
It looks like the |
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'; |
it is not picking up changes, does SplitPanel depends on parent size? |
I'm trying to use
SplitPanel
in a widget that is used in Jupyter Lab extension. I'm able to addSplitPanel
and it is displayed in the html source but it has width and height 0.Below is the class that I'm displaying:
Here is screenshot showing html source:
![image](https://private-user-images.githubusercontent.com/6959032/296267738-5b52ea3a-68bd-449e-847e-4dbdb14d0aa3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1ODk5NzQsIm5iZiI6MTcyNDU4OTY3NCwicGF0aCI6Ii82OTU5MDMyLzI5NjI2NzczOC01YjUyZWEzYS02OGJkLTQ0OWUtODQ3ZS00ZGJkYjE0ZDBhYTMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjVUMTI0MTE0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGRkZWYyNmE2YWM0ZTU3Y2M1YmMwODFkZjMzNWM1YmI5MjgxYzlkMGZkNTMxZDNlMjk0ZmVmNjA0MDBlYWM4MyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ._amHI2b2TgJEa5o5Ry0tuyEBqUkMoETG22W9nYo_DFk)
Node with text content is in the html source but it is not displayed. I expect that
SplitPanel
will show both texts.The text was updated successfully, but these errors were encountered: