Required error message is overlapping field labels

  • Swoodruff2002
    Asked on April 6, 2016 at 2:07 PM

    Also, having trouble with a table matrix that has required entry every row, and the REQUIRED error state is obstructing the table martix labels via text/background color are the same...

    http://screencast.com/t/MfS9RRuCK

  • BJoanna
    Replied on April 6, 2016 at 2:24 PM

    I have tested your form and I was able to replicate mentioned issue. I also noticed that required error message in also overlapping labels of other fields as well if they are not filled. 

    Required error message is overlapping field labels Image 1 Screenshot 50

    You can move required error message by by Injecting Custom CSS.  Inside of your Form Builder select Setup & Embed tab, then click on Preferences, then select Form Styles tab and inside of Inject Custom CSS field at the bottom of existing code paste this code:

    .form-line-error .form-error-message{

    top:35px!important;

    }

    Required error message is overlapping field labels Image 2 Screenshot 61

    After you add this code you form, required error message will be shown like this. 

    Required error message is overlapping field labels Image 3 Screenshot 72

    Required error message is overlapping field labels Image 4 Screenshot 83

    ON my cloned form I have added mentioned CSS code. Here is my cloned form: https://form.jotform.com/60965107613960 

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance.

  • Swoodruff2002
    Replied on April 6, 2016 at 4:37 PM

    Thanks BJoanna - Those are good fixes... how about the font color in the matrix table labels? See about how they are dark grey and unreadable in the error state?

    http://screencast.com/t/BZpvOLy3

     

    Thanks,

    Steve

     

  • Huberson
    Replied on April 6, 2016 at 5:38 PM

    Simply add the bellow CSS at the bottom of existing code should fix it. 

    .form-line-error{

        color: #ccc;

    }

  • Swoodruff2002
    Replied on April 6, 2016 at 5:45 PM
    Awesome – Thanks!!

    ...
  • victor
    Replied on April 6, 2016 at 6:07 PM

    On behalf of the entire support team, you are very welcome. If you have any other question, please do not hesitate contacting us.

  • Swoodruff2002
    Replied on April 6, 2016 at 6:45 PM
    Actually, for the theme I’m using, what’s the CSS to format the Other Field input to white text, to match the label font color?

    http://screencast.com/t/GxCjZoU1blkI

    Thanks so much –

    Steve

    ...
  • David JotForm Support Manager
    Replied on April 6, 2016 at 10:35 PM

    Inject the following code:

    .form-radio-other-input {

        color: white !important;

    }

    Required error message is overlapping field labels Image 1 Screenshot 20

    Let us know if you need anything else.