How to position fields using CSS codes on the form.

  • odnd
    Asked on September 14, 2016 at 9:20 PM

    I'm in way over my head with the CSS here, and I hope you can help point me in the right direction.

    I have 9 fields. I'd like 3 fields on each line. I'd like the labels to appear above the input fields.

    Sometimes display: block seems to help, but other times not.

  • Chriistian Jotform Support
    Replied on September 15, 2016 at 1:02 AM

    Please remove the current CSS in your Configurable List widget CSS area and replace it with the code below:

    #list td{

       padding-right:20px;

    }

    #list th {

        display: none;

    }

    #list tr{

    display: block;

    }

    .col3,.col6{

    float: left;

    }

    td.col1:before {

        display: block;

        content: "Purchase Date";

    }

    td.col2:before {

            display: block;

        content: "Vendor  ";

    }

    td.col3:before {

        display: block;

        content: "Item/s ";

    }

    td.col4:before {

        display: block;

        content: "Purpose ";

    }

    td.col5:before {

        display: block;

        content: "Total Cost";

    }

    td.col6:before {

        display: block;

        content: "Payment Method";

    }

    td.col7:before {

        display: block;

        content: "Check # ";

    }

    td.col8:before {

        display: block;

        content: "Reimbursement ";

    }

    td.col9:before {

        display: block;

        content: "Reimburse whom ";

     

    }

    Here's how it should look after:

    How to position fields using CSS codes on the form Screenshot 20

    If you need further assistance, please let us know.
    Regards.

  • odnd
    Replied on September 19, 2016 at 9:25 PM

    Thank you so much for this, and I apologize for the slow reply. Unfortunately, for some reason, I don't see any change in the layout, even after I applied your CSS.

     

    How to position fields using CSS codes on the form Screenshot 20

  • odnd
    Replied on September 19, 2016 at 9:34 PM

    In fact, it looks like the CSS isn't getting applied at all — even the "content" text isn't reflected in the configurable list....

  • jonathan
    Replied on September 19, 2016 at 10:38 PM

    There is a misunderstanding. The CSS provided by my colleague should be applied to the custom CSS of the configurable list instead. Not on the form custom CSS codes.

    wrong:

    How to position fields using CSS codes on the form Screenshot 40

     

    correct:

    How to position fields using CSS codes on the form Screenshot 51

     

    I test the CSS code on a test form, and it indeed positioned the field correctly.

    How to position fields using CSS codes on the form Screenshot 62

    Please try correcting on your form as well. Let us know if still not resolve.

    Thanks.

     

     

  • odnd
    Replied on September 19, 2016 at 10:49 PM

    Thank you!!!! My gosh. I was away from this project only a few days, and I'd already forgotten what that difference was. I just need more practice, I guess. Many thanks for your patience!

  • odnd
    Replied on September 19, 2016 at 11:11 PM

    I'm still having trouble getting cols 1-3 on one line — it seems that the configurable list isn't wide enough within the allotted space. Is there a CSS rule that could control that?

    How to position fields using CSS codes on the form Screenshot 20

  • jonathan
    Replied on September 20, 2016 at 12:30 AM

    I directly fixed it on your form https://www.jotform.us/form/62574699582171

    How to position fields using CSS codes on the form Screenshot 20

    Let us know if still not working for you.

    Thanks.

  • odnd
    Replied on September 20, 2016 at 12:48 AM

    Thank you so much, Jonathan! You've been a terrific help! I really appreciate your patience!

  • Charlie
    Replied on September 20, 2016 at 2:16 AM

    In behalf of my colleagues, you are most welcome. Please feel free to drop by here in the forum if you needed any help again.

    Thank you.