Lining up fields

  • RFOneVision
    Asked on February 12, 2018 at 9:09 AM

    Could you help me line these fields up so the two rows are much closer together and are aligned vertically?

    Thanks

    Jotform Thread 1381195 Screenshot
  • BJoanna
    Replied on February 12, 2018 at 11:13 AM

    Add this CSS code to your form:

    li#id_104, li#id_105{

        width: 110px;

    }

    label#label_105, label#label_106, label#label_107,label#label_108 {

        display: none;

    }

    li#id_104 {

        top: -12px;

        width: 123px;

    }

    li#id_106, li#id_107 {

        width: 100px;

    }

    div#cid_100 {

        padding-top: 27px;

    }

    How to Inject Custom CSS Codes

    1518451773css1 Screenshot 10

    Here is my demo form: https://form.jotform.com/80424149763964 

    Feel free to test ti and clone it

    As an alternative you can use the Input Table field.

    1518451888input table Screenshot 21

    Hope this will help. 

  • RFOneVision
    Replied on February 12, 2018 at 4:49 PM

    Your codes weren't quite working for me, but this code here lines up the fields on Chrome quite nicely:


    li#id_104 {top: -33px; width: 113px;}

    li#id_105 {top: -20px; width: 96px;}

    li#id_106 {top: -20px; width: 91px;}

    li#id_107 {top: -20px; width: 98px;}

    li#id_108 {top: -20px}

    However, they aren't being rendered quite the same on other browsers like IE. Is there a way to put these fields in a table to force their alignment better?


    This code doesn't seem to do anything? Could you check and/or explain what it should be doing?

    label#label_105, label#label_106, label#label_107,label#label_108 {display: none;}

    div#cid_100 {padding-top: 27px;}

  • Kevin Support Team Lead
    Replied on February 12, 2018 at 7:04 PM

    The code my colleague provided above should have aligned the elements; however, I can see you have already managed the fields position with other CSS code, this may be conflicting and that may be why you noticed some code not having effect on the form. 

    I got this working on my end:  

    #id_100, #id_104{

        width: 150px !important;

    }

    #id_106{

     margin-left: 12px;

    #id_107{

        margin-left: 9px;

    }

     #id_108{

    margin-left: 5px;

    }

    Now, as my colleague suggested, you may alternatively use an Input Table element since it will display the fields as you want and its layout will be a bit ordered, such fields can be also used on calculations as explained here: https://www.jotform.com/help/343-How-to-Perform-Form-Calculation-in-the-Matrix-Field 

    You may also clear up the input table format and give the impression that they are multiple fields aligned, example: https://form.jotform.com/80427111420946 

    Feel free to clone my form and see the code I injected. 

    Thanks.