search

mskocik / svelecte

Flexible autocomplete/select component written in Svelte,
https://svelecte.vercel.app
MIT License
472 stars 44 forks source link

Setting CSS #226

Closed macsupport closed 5 months ago

macsupport commented 7 months ago

I really like your project and it works well in my App, but I am having an extremely difficult time with the CSS. It seems impossible to set css to fit in with my UI layout. I understand it is set in Svelecte.svelte but changing it to fit in with my App CSS UI (tailwind.css) has been very frustrating. No matter how I try to alter the Select CSS, it has no effect. (Using global: ) Text is too small and is truncated, the text input width is about 1em, etc. Some help in this area would be greatly appreciated. or an example of how one can reasonably alter the CSS. This is how it looks currently

Screenshot 2024-04-29 at 9 24 17 PM

mskocik commented 7 months ago

Not sure what your styles look like, but try this example of custom svelecte styling in tailwind. Check the app.css file from line 57, where I added "default" properties for svelecte. You could also redefine style for inner css classes which svelecte uses.

But in general I would say, default 'layout' css should be good for every or at least almost every use case.

If you find something not working, please provide example with issue.

macsupport commented 6 months ago

I really appreciate your example. It helped quite a bit but still having troubles with other CSS overriding Svelecte but working on it.

mskocik commented 6 months ago

Sure, let me know it you encounter something that is impossible to customize or some additional CSS property should/could be exposed. And with some test scenario (similar to what I posted) so I would be able to take a look.

github-actions[bot] commented 6 months ago

This issue is stale because it has been open 21 days with no activity. Remove stale label or comment or this will be closed in 3 days.