field in absolute position covers conditionally shown field

  • bdoodle
    Asked on April 3, 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:

    http://www.jotform.com/?formID=50756726233154

    field in absolute position covers conditionally shown field Image 1 Screenshot 20

  • chanesteves
    Replied on April 3, 2015 at 11:03 AM

    Hi bdoodle,

     

    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.

    ------------------------------------------

    #id_265 {

       z-index: 100;

    }

    ------------------------------------------

     

    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.

     

    field in absolute position covers conditionally shown field Image 1 Screenshot 20

  • bdoodle
    Replied on April 3, 2015 at 11:38 AM

     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. 

  • chanesteves
    Replied on April 3, 2015 at 11:43 AM

    Hi,

     

    I just checked the form in your website. I'm glad to know you solved your problem.