All topics

popover api... dropdown that automatically updates to parent's width/position and page width

ssssadsadasd

28 days ago

I am not sure I understand this article on popover api [here](https://toddle.dev/blog/no-more-dreadful-dropdowns-long-live-popover).
it starts with the dropdown explanation (which is my objective). however, the youtube video only implements it such that the dropdown is shown only relative to the page. and the comment in the youtube video mentions that "the W3C is currently working on a spec for anchor positioning, where it will be possible to position the popover realtive to an other element on screen" which I guess means that this is not supposed for dropodowns yet???

another point is that it would be very helpful if in future videos you also have a link to the implementation explained.

finally: what is the best way to build a dropdown that automatically updated to parent's width/position and page width?

thanks
Andreas Møller

28 days ago

You can’t really use the popover api for anything other than dialogs/modals yet
There is a new css feature coming soon that lets you build dropdowns and popovers
Until then I recommend using the spark library
Lucas G

28 days ago

You can use it for dropdowns in a hacky way but it'll be way better once things like anchor roll out
Lucas G

28 days ago

The starter package uses popover for its dropdown for example but I recommend spark package. It is much better built
ssssadsadasd

28 days ago

ok thanks.
spark is great, but it is a bit confusing with all the components and some functionality I believe I cannot access. it just removes that "I have everything under control" feeling

I think I will use one of the implementations in the other templates
Lucas G

28 days ago

You should be able to access everything
ssssadsadasd

27 days ago

@Lucas G e.g. [here ](https://toddle.dev/projects/teal_sebulba_biological_tarantula/branches/start/components/so-dropdown?canvas-width=800&canvas-height=800&rightpanel=style&selection=nodes.zMsiAZey-UE9KPJofs5q2) I dont have access to see what happens behind sc-dropdown-root or sc-dropdown-trigger
@ssssadsadasd
@Lucas G e.g. [here ](https://toddle.dev/projects/teal_sebulba_biological_tarantula/branches/start/components/so-dropdown?canvas-width=800&canvas-height=800&rightpanel=style&selection=nodes.zMsiAZey-UE9KPJofs5q2) I dont have access to see what happens behind sc-dropdown-root or sc-dropdown-trigger
Max

27 days ago

Hi! That is because those are components exported from the Spark Core package. This is on purpose. The components handle the quite complex logic internally, so that you don't have to. But you can check the source code of the package anytime 😊
👍1
👍1

popover api... dropdown that automatically updates to parent's width/position and page width

ssssadsadasd

Andreas Møller

Lucas G

Lucas G

ssssadsadasd

Lucas G

ssssadsadasd

Max

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community