Please remove Portal's div wrapper...

I don't understand why <Portal> wrap my component in new div... Is there no way to remove it??

13 Replies

I'm not sure exactly how it works but there is a mount prop that might allow you to change how that works? That being said, why is wrapping in a div that big of a deal for you?

musiclover•2y ago

It makes div wrapper even if mount is provided. It's problem, for example my component has css style already like position: absolute, Then wrapping it as div is a problem.

jesseb34r•2y ago

which component has position: absolute that isn't working for you? I am working on a modal component using <Portal /> rn that has no issue with absolute positioning and styling

jesseb34r•2y ago

https://playground.solidjs.com/anonymous/14cee902-fb12-439c-9aa7-0a9fa44ac972

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

musiclover•2y ago

The mount prop get Node. Should I use like getElementById () to pass prop to mount?

jesseb34r•2y ago

Idk honestly, the docs don’t make it obvious and I haven’t messed around with it enough to figure it out

musiclover•2y ago

Can you show me example not in "document.body"? Sure putting in document.body with aboslution positon isn't problem. But if you want to put Portal in deep nested div, Wrapping div is a problem.

jesseb34r•2y ago

Wym putting it in a deep nested div. Like you want to portal the component to a different section of the dom?

Unknown User•2y ago

Message Not Public

musiclover•2y ago

Because sometime I want to put certain point, my app is using transform "scale" at main div, so putting Portal to body is not ideal. in Vue, Portal didn't need to be used document.body, and didn't make wrapper div

lxsmnsyc•2y ago

Portals require an Element to be mounted to (through mount). If nothing is provided, a div is created at the end of the body and the children of the Portal is appended to that div React requires an element Vue doesn't have portals unless you're referring to a 3P

Some Call Me Tim•2y ago

I also am not a fan of having a ton of non styled div's (or styled divs waiting to be mounted) thanks to Portals, so I sometimes do a hack where I intercept the ref and manually add styles to it.

   <Portal
          ref={(el) => {
            el.classList.add('absolute l-5');
          }}

   <Portal
          ref={(el) => {
            el.classList.add('absolute l-5');
          }}

Unknown User•2y ago

Message Not Public

Gaming

Programming

Please remove Portal's div wrapper...