What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
field in absolute position covers conditionally shown fieldAsked by bdoodle on April 03, 2015 at 10:18 AM
I have scores of image fields (showing a spinnaker sail) assigned to the same absolute position relative to the top of the form so they will overlap. I show 1 or more of them depending on what is selected in the various panel color drop down boxes for a spinnaker. Next to them I have the spinnaker available colors image set to the same position relative to the top of the page.
If the selected panel colors are inappropriate given what was selected in the Spinnaker Type Ordered drop down box higher up the page, I show some error text. e.g. If the customer has selected a spinnaker in only red, white, or blue in the Spinnaker Type Ordered field, they shouldn't be selecting a silver panel to show up in the spinnaker.
When this error (which is hidden to start) is displayed, all fields below it are moved down and the spinnaker sail images which are at an absolute position move up the page. The error text appears in front of the sail panel images but behind the spinnaker available colors image. (See below) How can I get the error text to appear in front of the spinnaker available colors image or handle this situation is some other way?
Thanks for your help.
My form is:
Have you tried adding z-index property to the element containing the error message in question? I noticed they don't have z-index CSS property. You can add the following CSS to the element containing the said error message.
To add custom CSS to your form:
1. Open you form in design mode and look for the element containing the error message (element id: id_265).
2. Click on the CSS tab.
3. Add the lines mentioned above.
I added a z-index of -100 to the image overlapping the error text, and it now appears underneath the error. I couldn't add the z-index to the error message field itself because it was not defined in an absolute position.
Thank you for telling me about z-index.
I just checked the form in your website. I'm glad to know you solved your problem.