Class to top level - Githubissues

joeattardi / picmo

JavaScript emoji picker. Any app, any framework.

https://picmojs.com

MIT License

1.19k stars 117 forks source link

Class to top level #198

Closed levipadre closed 2 years ago

levipadre commented 2 years ago

Hi,

Maybe I just can't find in the doc, but is there a way to add class to the very top level of the popup? I can catch that with [class*="popupPicker_popupContainer"] for example, but it would be great a defined class. For instance I need to change the z-index, but it can be anything of course. With the class name we could change also the style of the close button a bit easier.

Ionys320 commented 2 years ago

I have the same issue by using Tailwind and the z-index classes with PicMo : it's not useful because custom classes are not on the top container.

joeattardi commented 2 years ago

Hey folks! Yes, sorry, I missed this one when I separated the packages. I have a new update coming in the next few days that adds an in memory datastore option and some fixes, I will definitely include this.

The class name is scoped so it may not always be the same. I can take one of two approaches:

Add a zIndex popup option
Add a className popup option that works the same as the picker className option; this is probably more flexible so you can do your styling right in CSS.

Will update here when the fix is available! Thanks for checking out the new release.

levipadre commented 2 years ago

Thanks man! The top classname would be the best, but you can add the zIndex to the options as well, it won't interfere. I think it was in the previous version as well. Thank you for the great support. Everyone should do the same way you do 👍

joeattardi commented 2 years ago

Fixed in 5.1.0! The popup options object now supports a className option that can be used to change the z-index.