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

    Appointment Slots Widget: Split list into two columns using CSS

    Asked by riversconservatory on October 27, 2015 at 01:56 PM

    I'm using the Appointment widget on a form but my list is quite long. Is there a way to split this into two columns but still be one widget?

    https://form.jotform.com/52994305762968

     

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

    two columns appointment appointment widget CSS custom CSS
  • Profile Image
    JotForm Support

    Answered by Mike_G on October 27, 2015 at 04:35 PM

    First, we need to increase the space allotted for the iframe. 

    Place the code below to the Inject Custom CSS using this guide: How-to-Inject-Custom-CSS-Codes

    iframe{

    width: 800px !important;

    }

    Then, the code below goes to the Custom CSS tab of the widget. 

    #checklist li:nth-child(odd) {

       float: left;

       width: 50%;

       border-right: 1px solid lightgray;

       box-sizing: border-box;

    }

    #checklist li:nth-child(even) {

       float: right;

       width: 50%;

       position: relative;

       top: -1px;

       box-sizing: border-box;

       border-left: 1px solid lightgray;

     

    }

    Here's the form I have used for testing: https://form.jotform.com/52996189990983

    Feel free to clone it if needed: How-to-Clone-an-Existing-Form-from-a-URL

    I hope this helps. Let us know if you need any further assistance. Thank you. 

  • Profile Image

    Answered by riversconservatory on October 27, 2015 at 04:48 PM

    Hi, I tried replicating. When I click on your test link I still see a single column:

    https://www.dropbox.com/s/5kpdmcdy53vfwna/Screenshot%202015-10-27%2016.45.23.png?dl=0

    This is what I'm hoping for:

    https://www.dropbox.com/s/3fhcas5t8xzq493/2col.jpg?dl=0

     

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 27, 2015 at 06:52 PM

    I'm sorry about that. You may now check the link(https://form.jotform.com/52996189990983) again as I have made sure the changes were already applied after adding the same CSS codes I have posted above. 

    Here's another form: https://form.jotform.com/52997488440976 that looks like what you would want to achieve. Please feel free to clone it, so you can inspect the CSS codes from the Custom CSS tab of the widget and the CSS codes from the Inject Custom CSS of the form.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by abajan on October 28, 2015 at 06:43 AM

    @riverconservatory

    Upon cloning your original form, I discovered that while you correctly applied the solution provided by my colleague, one of the rules in the Appointment Slot's custom CSS tab lacks a closing brace which renders all of the rules after it ineffective. The rule is highlighted below:

    Inserting the brace will fix the issue. Perhaps we should all bookmark this article.

    Cheers

  • Profile Image

    Answered by BJ2 on March 23, 2016 at 09:57 AM

    Hi!
    Appointment Slots an Gift Registry look the same so I tried the CSS for 2 columns in Gift Registry and it worked well.

    Please tell me how can I RESIZE the box in Gift Registry???
    I want to make it smaller or make it fit.

    Thank you in advance.

     

  • Profile Image
    JotForm Support

    Answered by Kiran on March 23, 2016 at 10:34 AM

    @BJ2,

    We have moved your query to a separate thread and shall be addressed there shortly.

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

    Thank you!