Form dropdown overlaps page content and lower options can’t be clicked

[Michael_Surnak]

Hello Elfsight team,

I’m having an issue with the dropdown field in my form. When the dropdown expands and extends below the bottom of the widget, any options that sit beneath the next section of my webpage become unclickable.

I’ve temporarily increased the blank space at the bottom of the form to reduce the problem, but on some devices the lower dropdown options are still not selectable.

Is there a CSS solution that would allow the dropdown to always appear on top of surrounding page elements so all options remain clickable?

I’ve attached a screenshot showing the issue. In this example, the “Other” option cannot be clicked. The form can be found here: K9 Pooper Troopers – Free Quote

Thank you, Michael

[Max]

Hey @Michael_Surnak

We’ve fixed the issue using this CSS code:

@external {
  section:has(:widget) {
    z-index: 2;
  }
}

Let me know if it’s fine now or if you have any questions left

[Michael_Surnak]

Works perfectly! Thank you Max, very much appreciated.

[Max]

No sweat