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 for columns in Ticket Purchases widget

    Asked by clarkschool on February 19, 2016 at 11:58 AM

    I lifted the custom CSS for the Ticket Purchases widget in this form off of another form, and I would like to change it so that the seat numbers go from 9 to 15 in the left column and 16 to 21 in the right column. Right now it is set up to force odd numbers into the left column and even numbers into the right column.

    How do I adjust the CSS to make this change?

    Thank you. 

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

    Custom CSS Columns align Fields positioning
  • Profile Image

    Answered by Huberson on February 19, 2016 at 01:44 PM

    Hi,

    Replace the previous CSS code with the one bellow. It's a bit long but might do the job for you.

    #checklist li:nth-child(-n+7) {

       position: relative;

       left: 0;

       width: 50%;

       border-right: 1px solid lightgray;

       box-sizing: border-box;

    }

     

    #checklist li:nth-child(n+8) {

    position: absolute;

    right: 0;

    width: 50%;

    box-sizing: border-box;

       border-left: 1px solid lightgray;

    }

    #checklist li:nth-child(8){

        top:0;

    #checklist li:nth-child(9){

        top:48px;

    #checklist li:nth-child(10){

        top:96px;

    #checklist li:nth-child(11){

        top:144px;

    #checklist li:nth-child(12){

        top:192px;

    #checklist li:nth-child(13){

        top:240px;

    }  

    You can view the clone HERE.

    Please let us know if that solve the problem.

     

    Thanks!

  • Profile Image

    Answered by clarkschool on February 22, 2016 at 10:03 AM

    Thank you for the excellent customer service, that fixed my issue!

  • Profile Image

    Answered by Huberson on February 22, 2016 at 11:14 AM

    You are welcome! It's been a pleasure for us to assist you :). Please do not hesitate to contact us if you have other issue.