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 can I RESIZE the box in Gift Registry?

    Asked by BJ2 on March 23, 2016 at 10:34 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:42 AM

    I see that the Gift registry on your form is now split into two columns. Do you mean to resize the checkbox or width of the item displayed? Could you provide us with more information on your requirement so that we can guide you in the right direction? If you can provide us with the screenshot, it would be helpful.

    We will wait for your response. Thank you! 

  • Profile Image
    JotForm Support

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

    Please refer to the thread below to attach a screenshot to your forum post.

    http://www.jotform.com/answers/277033

    Thank you! 

  • Profile Image

    Answered by BJ2 on March 24, 2016 at 01:41 AM

    Hi Sir Kiran!
    Thank you for the kind reply.
    Here's the photo and URL you need.

    https://form.jotform.me/60811253594455


    I tried to explore other CSS code given by other support team representative and I'm glad for it.

    And here's the code I am currently using on the photo above.

    #checklist li:nth-child(odd) {
      float: left;
      width: 20%;
      border-right: 1px solid lightgray;
      box-sizing: border-box;
    }
    #checklist li:nth-child(even) {
      float: right;
      width: 20%;
      position: relative;
      top: -1px;
      box-sizing: border-box;
     border-left: 1px solid lightgray;
    }



    Now, I have 3 things that need to be fixed, please help me Sir.

    1. I hope to make the boxes smaller or fit.
    Perhaps, tell me how to change the box HEIGHT and WIDTH.

    2. As shown on the photo, some border lines are broken

    3. The time slots are not in order.
    I hope to have a perfect sequence like for example below,

    21:00 Sun    05:00 Mon    10:30 Mon

    21:30 Sun    05:30 Mon    17:00 Mon

    22:00 Sun    08:00 Mon    17:30 Mon

    22:30 Sun    08:30 Mon    18:00 Mon

    23:00 Sun    09:00 Mon    18:30 Mon

    04:00 Mon    09:30 Mon    19:00 Mon 

    04:30 Mon    10:00 Mon    20:30 Mon etc...

    ***If all possible, I hope to have 24 rows and at least 7 columns.

    I saw a sample photo for this on another thread...Please see the photo below.
    Here's its URL http://www.jotform.com/answers/776473-Custom-CSS-for-columns-in-Ticket-Purchases-widget




    CSS codes for the photo above is on the following...

    #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;
    }  


    I've explored the code above and unfortunately, it has 2 columns only and couldn't show the other time slots...
    It's almost perfect but I couldn't figure it out how to make more than 2 columns with the code above.

    I am really hoping to receive any help from you Sir.
    Please bear with me.
    Thank you soooo much in advance!


  • Profile Image
    JotForm Support

    (Private)

    Answered by Mike_G on March 24, 2016 at 04:07 AM

    I have cloned your form and erased all the CSS codes in the Custom CSS tab of the Gift Registry widget and added the CSS codes below instead.

    body{

    width: 101% !important;

    height: 900px !important;

    }

    .checklist{

    border: none !important;

    }

    li.list-item label {

        font-size: 11px !important;

        width: 60px !Important;

    }

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

        width: 14.29%;

        border: 1px solid lightgray;

        box-sizing: border-box;

        height: 50px !important;

    }

    .items-left {

        float: left;

        font-style: italic;

        font-size: 12px;

        color: #68B948;

        font-weight: 700;

    }

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

       position: relative !important;

       left: 84.560px !important;

       top: -900px !important;

    }

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

       position: relative !important;

       left: 169.12px !important;

       top: -1800px !important;

    }

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

       position: relative !important;

       left: 253.68px !important;

       top: -2700px !important;

    }

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

       position: relative !important;

       left: 338.24px !important;

       top: -3600px !important;

    }

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

       position: relative !important;

       left: 422.8px !important;

       top: -4500px !important;

    }

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

       position: relative !important;

       left: 507.36px !important;

       top: -5400px !important;

    }

    Here is the clone version of your form where I have applied the code above.

    https://form.jotform.com/60831097286966

    Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by BJ2 on March 24, 2016 at 04:21 AM

    Hi Sir Mike_G!
    WOW! I can't thank you enough!!!
    That's a tough job for me!
    A millions thanks for making it possible!!!

    GOD bless JotForm Support Team!

  • Profile Image
    JotForm Support

    Answered by Kiran on March 24, 2016 at 04:31 AM

    You are welcome. Glad to see that the solution provided by our colleague Mike_G worked for you and we thank you for kind words.

    Please do not hesitate to get in touch with us if you need any further assistance. We will be happy to help. 

    Thank you for using JotForm!!