How to set root to be position: unset?

Is it possible to set root to be a position: unset in a component?

Hi! What is your use case here?

Hey! We’re trying to recreate this menu with just the tool itself and not having to rely on code components

@responsible_spider You can definitely recreate this menu design with Plasmic, without the use for any code components, or any changes to Plasmic’s Studio.

I’d consider creating a component for each of the menu links (Freelance collaboration, making selects, smart search, etc…) as they’re largely the same. You can then create slots to replace the icons and text for each instantiation of that component. You can nest those components of their ancestors, however you choose to organize it, based on your use case across screen size variants.

@parliamentary_trout the contents without in the menu isn’t the issue that I’m running into currently, that’s the easy part. The difficult part of doing this is Plasmic currently is that the position of the menu is based on the parent of the dropdown, not the dropdown root itself. Without being to set the position of the root to unset, it means that I won’t be able to have positioning based on the parent.

There are few methods you can use to solve this. You can nest a block inside of the root element of the component, and set positioning based on that, if your intent is to define the property at the component level. On the other hand, you can wrap the component with a block at the instantiation, define the layout of that block, and/or overwrite the position of the instantiated component nested in the block. Does that make sense? You’re welcome to invite me in the project, or we can setup a quick call.

@responsible_spider:

This is a crude representation built in Plasmic, considering the time I spent. Hopefully it inspires you that it can be knocked out super-fast with Plasmic.

andyair.gif

Thanks @parliamentary_trout, would you be able to share this example with me? I’d like to check out the live instance to see how you tackled this via Plasmic and if it’ll work for our case

I’m happy to hop on a call if that’s preferred

I’d have to discuss with my team before we shared.

I suppose we’re not against sharing more complex components with the community, but we’re not quite ready to do that just yet.

I’m happy to spend a few minutes with you on a call to help you solve a few things. DM me.

@chungwu, I just talked with @responsible_spider, but was only able to provide a work-around using position: fixed

His team has a super-cool use case to support the need for this feature, and we’d love it as well!

Sorry guys just catching up on this thread :sweat_smile: So, by default, we use position:relative, which makes it saner to have absolutely-positioned children. But you’d like to opt out of position:relative, so that your absolutely-positioned elements can be positioned relative to the parent of the component instead?

@chungwu yup that’s correct. I’m fine with having position: relative as a default value, since I can see this benefiting our designers who don’t have an deep understanding of CSS. However, there are still cases where we’d want to opt out of this default.

Currently, my work around for this is to force the position: unset through component subsituation. This isn’t ideal though since it doesn’t appear to render properly in the Plasmic editor

@chungwu is there any update on this?

Not yet; plan is likely to have a place where users can override arbitrary css, rather than make this an option from the position panel

That sounds awesome! Is there an ETA on this? This would be super useful for us

probably a little further out, but we’ll soon let you embed arbitrary global css, so you could create a class for it and attach it to the element. Not as nice, I know…