Open egormkn opened 9 months ago
I found the code that creates that div in ipyvue repository. Maybe this issue should be moved there.
Can we mount a JupyterPhosphorWidget to this.$el.parentNode
and either remove this.$el
from DOM or hide it with dispay: none
?
Also, for Vue v3 it should be possible to create a placeholder DOM node (or a comment node) instead of div, as it's done for components with multiple root nodes. However, I hope this issue can be resolved quickly without upgrading to Vue v3.
I tried to create a comment node in render function, mount a JupyterPhosphorWidget as a sibling to this node and then remove the comment node: https://github.com/widgetti/ipyvue/compare/master...egormkn:ipyvue:placeholder-dom-node It now renders correctly, however I'm not sure if such kind of manual DOM manipulation is safe in terms of Vue reactivity.
Also, in my tests in Jupyterlab I noticed a bug that is caused by that height: 100%
: the wrapper div takes 100% of the output height.
yeah, the extra div is indeed a pain point, but we have not found a way around it yet.
I've tried your branch and it works for getting an embedded widget in. After I removed refNode.remove();
I could also replace an embedded widget. But changing the order of widgets of the same parent doesn't work.
Notebook example:
import ipywidgets
import ipyvue as vue
children = [ipywidgets.Button(description="hi1"), ipywidgets.Button(description="hi2")]
main = vue.Html(tag="div", children=children)
main
Then change the order:
main.children = children[::-1]
Notice the order of the children doesn't change in the DOM.
A workaround for the extra div is to have a div with the right properties in ipyvue and add the embeded widget to that.
Hi! When I use ipywidgets inside of ipyvuetify widget, they are wrapped in a
<div stye="height: 100%;"></div>
. This doesn't allow customizing layout with flexbox, because I can't change the class or style of this wrapper. Is it possible to display ipywidgets without an extra div? It seems that when I put ipywidgets widget inside another ipywidgets widget (VBox), there is no extra div.Example: