search

remotestorage / remotestorage-widget

⬡ Connect widget for remoteStorage.js
https://remotestorage.io
28 stars 16 forks source link

Fix modal backdrop overlaying widget content #111

Closed ProggerPete closed 4 years ago

ProggerPete commented 4 years ago

Ensure the zIndex is honored for the widget so it stays above the modal backdrop.

fixes #109 fixes #110

raucao commented 4 years ago

Thanks for the PR! I just tested this and now I know why I didn't see this before: in my own apps I'm setting the position to fixed, thus accidentally fixing the bug (no pun intended).

This fix works in general, but breaks said custom positioning now (unless someone adds !important to their positioning rule).

I'm now trying to come up with a way that both fixes the unspecified position issue as well as doesn't require !important for simple custom positioning. Any ideas appreciated.

Edit: requiring developers to set !important is probably the most straight-forward solution actually. Not sure about it still. What do you think?

ProggerPete commented 4 years ago

What about prepending the style element to the head instead of including it with the rest of the widget HTML?

raucao commented 4 years ago

@ProggerPete That's a good, creative idea! I think this works in general.

However, @iLiviu found another way, which doesn't require a sort order for overrides at all: #112

What do you think about that one? Seems to work pretty well for my testing with various positioning use cases.

raucao commented 4 years ago

@ProggerPete As I haven't heard back from you, I went ahead and merged the other solution. Personally, I didn't have a strong preference, but not depending on the sort order of the CSS statements seemed just a tiny bit cleaner to me. I have credited you in the release notes nonetheless. :pray: