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

    Custom CSS in Configurable List is extending tr or td, new record button too far down

    Asked by jdombrowiak on September 28, 2016 at 05:42 PM

    Hi,

    Using the various tutorials I was able to edit the CSS in my configurable list widget to support multiple rows.  However it has created a lot of empty space in either the tr or td tag (I can't tell which) and it's pushing the + (labeled "Add Plan") button too far down.

    The form URL is https://form.jotform.com/62716083960156, screen shot below, any help appreciated!

    Page URL:
    https://form.jotform.com/62716083960156

    Screenshot
    configurable list configurable
  • Profile Image
    JotForm Support

    Answered by jonathan on September 28, 2016 at 11:54 PM

    I checked your form https://www.jotform.com/62716083960156 and I seeat this time that the CSS code had messed up the widget layout.

    Let me check how it can be fix. I'll get back to this once I have update.

     

  • Profile Image

    Answered by jdombrowiak on September 29, 2016 at 12:53 PM

    Morning, any feedback on this?

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 29, 2016 at 02:35 PM

    We will check this now and get back to you with updates. Stay tuned!

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 29, 2016 at 03:31 PM

    Replace your CSS codes with this:

    http://pastebin.com/raw/kHnAQLCa

    It should give you the following format:

    Hope this helps!

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 29, 2016 at 03:35 PM

    By the way, if the first CSS codes do not provide you that result, please use this instead.

    http://pastebin.com/raw/FX43UCPE

    I think this one works better for your form.

     

  • Profile Image

    Answered by jdombrowiak on September 29, 2016 at 04:03 PM

    Hi Elton!

     

    Unfortunately neither solution looks anything like your screen shot, here is what I'm getting.

  • Profile Image
    JotForm Support

    Answered by jonathan on September 29, 2016 at 08:12 PM

    Hi,

    We apologize for the delays. I fixed it on your form https://www.jotform.us/form/62716083960156 using the CSS codes provided by our colleague EltonCris.

    Can you please check again. Let us know if still different.

    Thanks.

     

  • Profile Image

    Answered by jdombrowiak on September 30, 2016 at 08:51 AM

    Thank you!  I realize now that it was working, I had my browser zoom setting dialed up, sorry for the error!

  • Profile Image

    Answered by jdombrowiak on October 03, 2016 at 01:28 PM

    I'm very sorry.  I realized the need to add an additional field at the beginning of the form.  I've tried using the methods to reposition the remaining fields but it's throwing everything off again.

     

    Same form, I just added the new text field as Column 1, which pushed everything else out one column.  Could someone help?  Thanks!

  • Profile Image
    JotForm Support

    Answered by Boris on October 03, 2016 at 07:09 PM

    Please do not worry, it won't be hard to adjust the CSS code of our colleague. I see that you have already added your own field labels for the new fields by editing this part:

    [...]

    .col1:before{content:"Enter a description"}
    .col2:before{content:"Start Date"}
    .col3:before{content:"End Date"}

    [...]

    Now, to ensure that the line will break at the exact field you want it to, such as if you want the text "EMPLOYEE contribution" to always break onto a new row, we would change the CSS for this exact field. This field is the 8th one on the form, so its code would be:

    .col8{clear:left;}

    This would cause field 8 to start on a new line again. We can use the same approach for placing "Optional, employer cost" on a new row. Since it is the 13th field, we would use the following code:

    .col13{clear:left;}

    If you need further assistance, please let us know.

  • Profile Image

    Answered by jdombrowiak on October 04, 2016 at 09:21 AM

    Boris, thank you so much that makes this MUCH easier!

  • Profile Image

    Answered by Irshad on October 04, 2016 at 11:54 AM

    On behalf of my colleague, you are welcome.

    Feel free to contact us, if you have any other question.