Error formatting on small screens blocks certain fields

  • Profile Image
    philagov
    Asked on February 01, 2016 at 07:45 AM

    The CSS on the error messages make certain fields unusable on mobile (e.g., phone number, datetime). You can see this by adding any of these fields to a responsive form and setting them to required. It seems that this is because the inputs in these fields are floated, and the size of the parent element doesn't take them into account.

    I added the following CSS to fix:

    .form-line-error .form-error-message {
        clear: both;
    }

    It might be good to add that to the default CSS, at least for small screens.

  • Profile Image
    beril
    Answered on February 01, 2016 at 11:27 AM

    When I've tested the your form with my phone I am able to reproduce same issue that you are having.

    I am not sure how to solve your issue with different way. However, the CSS code that you've added resolves your issue perfectly.

     

    .form-line-error .form-error-message {
        clear: both;
    }