Select field displaying wrongly

Hi @cucapah

It looks like this might be happening due to some conflicting CSS on your site/the forminator plugin.

You can add this CSS wherever appropriate for your site to solve the issue:

.forminator-select {
    z-index: auto;
}

Hope this helped.

Adam – @wpmudev-support8 / WP Dev MU Staff

This issue was caused by a CSS rule in Modern Events Calendar Lite 6.6.4 effecting Forminator 1.18.1 (and probably other versions).

The CSS file in question from Modern Events Calendar – https://library.imperialcounty.org/wp-content/plugins/modern-events-calendar-lite/assets/css/frontend.min.css?ver=6.5.6

The issue CSS rule in the file –
.select2-container{z-index:99999999}

Rule causes select field dropdown menu to be obscured by other elements.

Hi @aakash8

Thank you so much for your prompt response.

I do have Modern Events Calendar installed and active in the site. So How can I solve the issue? do I have to deactivate ME Calendar?

Hi @cucapah

Glad to help!

As mentioned above, you can add this CSS rule to solve the issue:

.forminator-select {
    z-index: auto;
}

A common way to do this is go to https://example.com/wp-admin/customize.php (replace “example.com” with your site, so https://library.imperialcounty.org/wp-admin/customize.php).
Then open the “Additional CSS” tab, and paste the code above into the text field.

If that doesn’t do the trick, try:

.forminator-select {
    z-index: auto !important;
}

Hi @aakash8,

That did it. I had to use the !important one.

Thank you!

Hi @cucapah,

We are happy to hear that the issue has been resolved.
Please let us know in case you need further help.

Kind regards,
Zafer