Dropdown focus causing movement on form

  • Enlighted_INC
    Asked on June 24, 2020 at 12:25 PM

    Hello

    How can I stop the line from moving when I select the dropdown menu?

    see link

    this is on my form that starts with "Work in progress"

    Page URL: https://www.dropbox.com/s/8o6tieaql74p6qz/Movement.mov?dl=0
  • Ashwin JotForm Support
    Replied on June 24, 2020 at 1:52 PM

    I did test your form, and I am able to replicate the issue. You have injected several custom CSS (1691 lines) code to target separate field. Some CSS is causing this issue. If I remove all the custom CSS code, the issue gets resolved but the placement of fields changes. 

    Let me check this issue and I will also take my colleague's help to investigate the issue. We will get back to you on this soon. 

  • Elton Support Team Lead
    Replied on June 24, 2020 at 7:32 PM

    Here's how to fix the movement, find this in your injected CSS codes.

    .form-textbox:focus, .form-textarea:focus, :focus 

    In its property, replace this:

    border: 1px rgb(208,0,0) !important;

    With this:

    border: 1px rgb(208,0,0) solid !important;

    If you're having trouble editing your existing CSS codes, inject this CSS code at the very bottom instead.

    .form-textbox:focus, .form-textarea:focus, :focus {

    border: 1px rgb(208,0,0) solid !important;

    }

    Expected result:

    Dropdown focus causing movement on form Image 1 Screenshot 20