Footer blocking pull-down menu when using the menu for a second time (footer should always remain in background)

code4recovery / tsml-ui

Embeddable recovery meeting finder

https://tsml-ui.code4recovery.org/

MIT License

23 stars 17 forks source link

Footer blocking pull-down menu when using the menu for a second time (footer should always remain in background) #398

Closed xralf closed 4 months ago

xralf commented 4 months ago

Using Safari on MacBook
The laptop display is small, and the problem may not become apparent on a large monitor.
Go to [https://aasanjose.org/meetings]()
Select meeting type, e.g., "secular" ... all good, secular meetings are displayed correctly.
Then, make another selection using that pull-down menu. The menu appears in the background, and the footer is in the foreground, thus blocking some selection options.
Workaround: Refresh the page an make a new selection.

(This bug may just appear if people scroll up and down on the page to reach the footer area.)

See screenshot after trying to select a meeting for a second time.

Thanks so much for creating/maintaining this Meeting Finder!!!

joshreisner commented 4 months ago

thanks @xralf - coincidentally we just made a change to raise the dropdown z-index to 1000 to debug a similar issue with another wordpress theme.

that doesn't seem to be working in this case. the best i can do i think is add some CSS to the theme:

body.tsml-ui .fusion-row, 
body.tsml-ui .fusion-row .fusion-fullwidth,
body.tsml-ui .fusion-footer .awb-menu__main-li > * {
  z-index: unset !important;
}

i'm not sure quite why 1000 is not greater than auto or 10 which are the values i'm seeing of these elements, but this does appear to fix it

joshreisner commented 4 months ago

joshreisner commented 4 months ago

if anyone has an idea on how to prevent this, rather than applying a bandaid to the site, lmk

xralf commented 4 months ago

Oh, that's awesome @joshreisner. Thank you for fixing it in light speed! Great to know where the repo for this app is and that a few folks are contributing to it. I wish I was a Node expert. Good stuff!