Lining up fields

  • Profile Image
    davsun55
    Asked on February 12, 2018 at 09:09 AM

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

    Thanks

  • Profile Image
    BJoanna
    Answered 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.JPG

    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.JPG

    Hope this will help. 

  • Profile Image
    davsun55
    Answered on February 12, 2018 at 04: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;}

  • Profile Image
    Kevin_G
    Answered on February 12, 2018 at 07: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.