How to avoid overlapping of select elements in a form on the same page?

3

I use wordpress as a CMS and created a form with the WPCF7 (Contact Form 7) plugin. It turns out that some form elements such as select, checkbox and radio button overlap each other in a way that I can not adjust them. View Image

With the help of jQuery I can set a z-index value for each element <select> generated by the shortcode of the WPCF7 plugin, however, they still overlap each other or are overlaid by other form elements such as checkboxes, as we can see in the image.

Even setting a z-index value for the <select></select> elements of the form with the help of jQuery, they are still affected by this overlapping effect.

Is there any solution in css and / or jQuery that sets the z-index value in a "universal context" for all form elements on a page? Or is this something related to the WPCF7 plugin?

SOLUTION - Case Study:

For those who are experiencing such a situation, just do as mentioned in the answer chosen for this question, ie use css to set a z-index value for a particular element of the form.

Regarding the Contact Form 7 plugin, anyone who uses it knows that we often use shortcodes to generate form elements. So, following the reasoning of the answer to this question, I solved the problem as follows:

1- Involve the WPCF7 shortcode that represents the form element affected by the problem with a <div> tag and set a class to be manipulated by css.

Ex:

<div class="select-profissao">[select* select-profissao id:cd-dropdown class:cd-select "Enfermeiro(a)" "Técnico(a)"]</div>

Where [select * select-profession id: cd-dropdown class: cd-select "Nurse" "Technician"] is the shortcode of the Contact Form 7 plugin responsible for generating the <select></select> element %.

The shortcode mentioned above generates the following html markup:

<div class="select-profissao">
<select class="cd-select" id="cd-dropdown">
<option value="-1">EU SOU PROFISSIONAL</option>
<option value="Enfermeiro(a)">Enfermeiro(a)</option>
<option value="Técnico(a)">Técnico(a)</option>
</select>
</div>

2 - Then write the css:

.select-profissao {
z-index: 1000;
position: relative;
} 

Just follow the same structure for other elements <select></select> created with the plugin and adjust the z-index value of each element independently.

    
asked by anonymous 03.03.2014 / 00:11

1 answer

1

Have you tried using this?

<style>
    *{
        z-index: 1000;
     }
</style>
    
03.03.2014 / 01:04