Spacing between lines / Error State does not display correctly

  • Profile Image
    seventhree
    Asked on December 11, 2020 at 03:12 PM

    Hi,

    My form naturally has a space between name and email

    1607717212_5fd3d15c8bdbd_form.png

    Error state toggled

    1607717289_5fd3d1a9271da_form-error-stat


    The email field has id: input_4. when i reduce the margin top, it displays correctly but error state hides the email placeholder

    1607717371_5fd3d1fb47467_form-new.png

    1607717391_5fd3d20f9acf8_form-new-error-

    1607717408_5fd3d2206c2ad_form-css.png


    Looking at my css, is there a better way to write some of these?

    Hiding the required field * ( i used form label top display none)

    zero margin for top and bottom of form (form buttons wrapper and page section each have margin -30px, etc)

    Any feedback is greatly appreciated.

    Thank you!

  • Profile Image
    Gaetan_B
    Answered on December 11, 2020 at 04:51 PM

    Hello,

    Thank you for reaching out.


    The reason for this behavior is that you're targeting the "child element". So when you push it using margin-top, it gets cut off by his parent.


    You should try to target the #id_4 instead of the #input_4.


    This will affect the parent, and the weird behavior you're experiencing will disappear.


    Gaetan

  • Profile Image
    seventhree
    Answered on December 11, 2020 at 05:12 PM

    Hello,

    Can you please check the other css as well?

    I am also getting this error when I try to submit without completing the form.

    As you can see, it hides the name field completely

    1607724660_5fd3ee74724f0_Screenshot 2020

    Is there a way to remove all padding, margins from a form instead of using these 2 for example?

    1607724726_5fd3eeb624b05_


    Thanks


  • Profile Image
    Jed_C
    Answered on December 11, 2020 at 08:06 PM

    Can you please try this CSS and see if this works for you.

    @media screen and (max-width: 768px)
    .pageLogo-mobile, ul.page-section {
      max-width: inherit;
      margin-top: 43px !important;
    }

    1607735197_5fd4179d49895_Clone of Form -

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know how it goes.

  • Profile Image
    Jed_C
    Answered on December 11, 2020 at 09:44 PM

    How about hiding the error bar since it's redundant and at the same time showing the error below the field. In my opinion, error bar would be beneficial for long forms due to the "See Errors" button, but for short forms like this, you can just hide it.

    If you are ok with that, you can disable it in form settings.

    1607740985_5fd42e39e8a75_The Easiest Onl

  • Profile Image
    seventhree
    Answered on December 11, 2020 at 09:55 PM

    That is a great solution!

    I agree on redundancy part, this is perfect.

    Thank you!