What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to position fields using CSS codes on the form.

    Asked by odnd 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
    JotForm Support

    Answered by Chriistian 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

    Answered by odnd 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

    Answered by odnd 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
    JotForm Support

    Answered by jonathan 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

    Answered by odnd 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

    Answered by odnd 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
    JotForm Support

    Answered by jonathan 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

    Answered by odnd 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
    JotForm Support

    Answered by Charlie 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.