search

CloudCannon / pagefind

Static low-bandwidth search at scale
https://pagefind.app
MIT License
3.51k stars 115 forks source link

Do not modify style of search input element (at least if `resetStyles: false`) #362

Closed eguiraud closed 1 year ago

eguiraud commented 1 year ago

Hello,

pagefind was a breeze to set up, thank you very much for working on this! The hardest part was the styling :smile:

One annoyance I had was that even if I create the PageFindUI object with the resetStyles: false option (which implies I will apply my own styling to the UI), when I start to write in the search bar the Pagefind JS code adds style="padding-right: 109px;" to the input element of the search form.

I can hack things around it, but it would be nicer if it didn't :)

bglw commented 1 year ago

Yeah that's being applied to make room for the Clear button in the search input — resetStyles only affects stripping the main site styles away, but doesn't avoid setting styles specifically for the PagefindUI. I can see how it's not ideal, though.

However, the best solution is to use the newer modular-ui package, as this lets you use your own input altogether, so you have a lot more control over the process 🙂

I'll leave this open as a potential additional option for Pagefind, such as unstyled: true

eguiraud commented 1 year ago

Thank you for the quick reply!

I guess my point was that with resetStyles: false there is no value in setting that specific style to that specific amount of pixels, it's virtually never going to be appropriate.

I'll check out the modular-ui, thanks!

bglw commented 1 year ago

To clarify, resetStyles doesn't control whether Pagefind's styles apply — that's controlled by choosing to include or not include the pagefind-ui.css file on your page. The purpose of resetStyles is to reduce conflicts between Pagefind's CSS and the CSS of the site it is embedded on. It's valid to set resetStyles: false and use the Pagefind CSS, which just allows the two to merge somewhat. In this case the UI CSS will still be putting the Clear button at the right of the input, so we still need the padding.

Removing the padding is only appropriate if the Pagefind CSS is omitted altogether, which the Pagefind UI doesn't really have any awareness of currently, which is why unstyled: true might be a nice addition as a signal for whether you intend to use the pagefind-ui.css file 🙂

Hope that makes sense! Check back in if you have any feedback on the modular-ui, also 🙂

eguiraud commented 1 year ago

Ah, I see, thanks. I did not realize you could still use pagefind-ui.css with restStyles: false :+1:

bglw commented 1 year ago

Closing this out as I think things are covered with the existing feature set — let me know if that isn't the case!