Question:
I use wordpress as CMS and created a form with WPCF7 plugin (Contact Form 7). It turns out that some form elements such as select, checkbox and radio button overlap each other in a way that I can't adjust them. View image
With the help of jQuery I can set a z-index value for each <select> element generated by the WPCF7 plugin shortcode, however they still overlap each other or are overlapped by other form elements like checkboxes, as we can see in the image.
Even though I set a z-index value for the form's <select></select> elements 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, that is, use css to define a z-index value for a certain element of the form.
Regarding the Contact Form 7 plugin, those who use it, know that we generally use "shortcodes" to generate the form elements. Thus, following the reasoning of the answer to this question, I solved the problem as follows:
1- Wrap the WPCF7 shortcode that represents the form element affected by the problem with a <div> tag and define a class to be handled 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 <select></select> .
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 <select></select> elements created with the plugin and adjust the z-index value of each element independently.
Answer:
Have you tried using this?
<style>
*{
z-index: 1000;
}
</style>