How to position fields using CSS codes on the form.

  • Profile Image
    odnd
    Asked on September 14, 2016 at 09: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.

  • Profile Image
    Chriistian
    Answered on September 15, 2016 at 01: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:

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

  • Profile Image
    odnd
    Answered on September 19, 2016 at 09: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.

     

  • Profile Image
    odnd
    Answered on September 19, 2016 at 09: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....

  • Profile Image
    jonathan
    Answered 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:

     

    correct:

     

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

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

    Thanks.

     

     

  • Profile Image
    odnd
    Answered 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!

  • Profile Image
    odnd
    Answered 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?

  • Profile Image
    jonathan
    Answered on September 20, 2016 at 12:30 AM

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

    Let us know if still not working for you.

    Thanks.

  • Profile Image
    odnd
    Answered on September 20, 2016 at 12:48 AM

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

  • Profile Image
    Charlie
    Answered on September 20, 2016 at 02: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.