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 split Ticket purchases widget in 2 columns? in 3 columns?

    Asked by grade4pagasa on August 11, 2016 at 06:48 AM

    Is there a way to split the ticket purchases widget into 2 and 3 columns like the checkbox spread columns tool? 

    If none, how to do it manually?

    And how to remove the numeric indicator (1) but still make the word "available" visible if the widget is made to behave like a radio button?

    Thanks. 

    Page URL:
    https://form.jotform.me/62232428115447

    ticket purchases spread columns
  • Profile Image

    Answered by grade4pagasa on August 11, 2016 at 10:10 AM

    After a few Google searches, I found a very easy CSS3 fix. 

    The good news, it works elegantly ! 

    The bad, the top border and 2 bottom borders are missing in the 3-column list item layout. 

    Could you help me put back the borders? 

    Thanks. 

  • Profile Image
    JotForm Support

    Answered by Mike_G on August 11, 2016 at 10:51 AM

    Yes ,the best way to achieve your requirement would be using CSS codes added to the Custom CSS tab of the widget.

    I have cloned your new form and I have found a fix to your new issue. 

    Please add the CSS codes below to your form: 

    #checklist li:nth-child(17){

    border-bottom: 1px solid #ccc !important;

    }

    Here's the clone version of your form where I have applied the changes: 

    https://form.jotform.com/62234082599966

     

    I hope this helps. Please feel free to contact us anytime. Thank you.

  • Profile Image

    Answered by grade4pagasa on August 11, 2016 at 12:00 PM

    Thanks, Mike_G. That solved the problem.

    1.) In case I encounter the same issue again, is there a CSS code I can use to just declare that the checklist item borders (4) should all be "1px solid #ccc !important;"?

    There's another question in my original post: 

    2.) And how to remove the numeric indicator (1) but still make the word "available" visible if the widget is made to behave like a radio button? 
  • Profile Image
    JotForm Support

    Answered by Kiran on August 11, 2016 at 01:40 PM

    Generally, the widget will be having the borders already applied. However, when the widget is split to display in multiple columns, one of the borders side will be affected and it is required to add the code for this particular row. So, it is not required to apply the borders for all the sides.

    Hope this information helps! The other question is moved to a separate thread and shall be addressed there shortly.

    https://www.jotform.com/answers/904071

    Thank you! 

     

  • Profile Image
    JotForm Support

    Answered by Mike_G on August 11, 2016 at 02:27 PM

    @grade4pagasa

    This is in addition to what my colleague, Kiran, have mentioned. 

    Notice that the ticket type, "eagle" is the 17th ticket in your widget that is why the code says:

    #checklist li:nth-child(17){

    border-bottom: 1px solid #ccc !important;

    }

    For some reason, the bottom border of the ticket type where the column is split first is most of the time not displayed. So, for example, the widget is split on the 12th ticket type then you can change the code to:

    #checklist li:nth-child(12){

    border-bottom: 1px solid #ccc !important;

    }

    At least, base on my observation and tests, that rule applies perfectly every time.

    I hope this helps. Let us know if you have any further question. Thank you.

  • Profile Image

    Answered by grade4pagasa on August 11, 2016 at 02:48 PM

    Thanks so much, Mike_G,  for not just giving me the answer but for also educating me on this alien concept. 

    NOTE to JotForm Support Manager Jeanette:

    I would like to commend Mike_G for the wonderful support he gave me. I really appreciate that he didn't just spoon-feed me, he also taught me a concept that I can later do on my own. Now, that's teaching a man how to fish - up to a level I can understand, that is ... 

    Again, thank you so much, Mike_G for an awesome service ! 

    Scientia est potentia. 

    - Randy, a very happy JF user.

  • Profile Image
    JotForm Support

    Answered by Kiran on August 11, 2016 at 03:22 PM

    That's great! Thank you very much for taking time to provide your valuable feedback. We really appreciate it and such feedback really boosts our energy levels to reach the new heights and serve you much better.

    Mike_G has received your comments and I have forwarded the feedback to our support manager as well. 

    Thank you!