Align the form fields vertically

  • RFOneVision
    Asked on June 22, 2019 at 2:40 AM

    I'd like to:

    1: Line up the radio buttons for Day visitors on my form, with the radio buttons for the age fields - or the Special Requests box left hand side.

    2: Have all the input field columns in the Numbers table the same width

    Can you help me out?

    Thanks,

    David

    Jotform Thread 1866397 Screenshot
  • RFOneVision
    Replied on June 22, 2019 at 2:41 AM

    I'd also like the row titles for the Numbers table (eg 'Adult over 17:') to be on one line rather than wrapped as currently. Thanks. D

  • roneet
    Replied on June 22, 2019 at 1:27 PM

    Please allow me some time to check this. I'll get back to you ASAP.

    Thanks.

  • roneet
    Replied on June 22, 2019 at 4:04 PM

    I created a cloned version of the form and made changes as per you asked.

    1561233625save Screenshot 10

    and Day visitors is line up radio button which is aligned to the left hand of Special request.

    1561233690save Screenshot 21

    CSS needs to be added

    tr td{

      width:50px !important;

    }

     

    tr th:nth-child(1){

      width:800px !important;

     }


    Please follow the cloned version of the form and make the required changes

    https://form.jotform.com/91725449800965

    Let us know if you need more assistance.

  • RFOneVision
    Replied on June 22, 2019 at 6:47 PM

    Thank you very much for the response, but I think I confused you with what I needed. Sorry. This image shows better what I mean. Thanks again.

    David

    1561243599Field lining up   required Screenshot 10

  • roneet
    Replied on June 22, 2019 at 11:34 PM

    Thanks for clarifying further. Let me check this once again.

    Thanks.

  • roneet
    Replied on June 23, 2019 at 11:06 AM

    Thanks for the explanation. There is a lot of CSS which are causing conflicts in the existing fields.

    I have made a clone of your form and tried to fix all the alignment issues.

    1561302156save Screenshot 10

    #id_98   {

    margin-left: -15px;

    }

    #id_49   {

    margin-left: -45px;

    }

    #id_100, #id_69, #id_99,

    #id_46, #id_47,#id_65{

    margin-left: -40px;

    }

     #cid_15{

       margin-left: -18px;

     }

      #id_10{

       margin-left: -7px;

     }

    .form-matrix-table{

      max-width: 500px !important;

    }

    #cid_82 th:nth-child(1){

     width:160px !important;

    }

    I have also removed a bunch of other CSS from the form, so please refer to the cloned form and make the necessary changes.

    Let us know if you need more assistance.

  • roneet
    Replied on June 23, 2019 at 11:07 AM
  • RFOneVision
    Replied on June 24, 2019 at 2:08 AM

    Great job - thanks. Most impressive!  :)