How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options?

  • ericablair
    Asked on January 23, 2015 at 5:53 PM

    Hi there,

    I am making a product order form through the Payment Wizard. Some of my products have no variation, some have 2-3.

    When the only variable is Quantity, the Quantity box automatically displays under the product name.

    When there is an additional variable, both the Quantity box and the Variable box are automatically collapsed until you click the checkbox next to the product name.

    How can I force the Quantity and Variable boxes to show even when someone has not yet selected the product? I would like all options to show when first viewing the form. Currently when they are collapsed, they cut off the photos that accompany the products.

    Screenshot attached with explanation.

    Jotform Thread 502423 Screenshot
  • Elton Support Team Lead
    Replied on January 23, 2015 at 8:47 PM

    Hi,

    Append this CSS codes to your form, this should permanently display the sub-product options on that form.

    #cid_38 > span.form-product-item:nth-child(8),

    #cid_38 > span.form-product-item:nth-child(14) {

    height: 120px !important;

    }

    #cid_38 > span.form-product-item:nth-child(16){

    height: 100px !important;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form 

    Let us know if you have further questions. Thank you!

  • ericablair
    Replied on January 23, 2015 at 9:14 PM

    That worked! However, now there is an uneven gap between products with 1 variant and products with multiple variants. What can I do to fix this? Here's a screenshot. Thanks!

    How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 1 Screenshot 20

  • Sean
    Replied on January 24, 2015 at 9:43 AM

    Hello ericablair,

    I checked your form and I realize that there is a slight inequality with the spacing between each item now compared to the screenshot you took in the above thread. I have also realized that it appears that the space allotted for each items is not sufficient for all the products listed on your order form.

    How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 1 Screenshot 30

    I adjusted the height in the code provided by my colleague and this was the end result. You can update the code in the Custom Injected CSS option in the settings.

    #cid_38 > span.form-product-item:nth-child(8),
    #cid_38 > span.form-product-item:nth-child(14) {
    height: 140px !important;
    }

    How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 2 Screenshot 41

    You can view my cloned version of your form here: 
    http://form.jotformpro.com/form/50234284809961

    I hope that this is of some assistance to you. Feel free to contact us if further support is needed.


    Cheers!
    Sean

  • ericablair
    Replied on January 25, 2015 at 11:32 PM

    Thanks so much, that worked too. However for some reason one item on my product list is still appearing truncated. I have tried deleting this product and reentering it, but it is still having the same issue. Any ideas?

    Screenshot:

    How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 1 Screenshot 20

  • Charlie
    Replied on January 26, 2015 at 9:24 AM

    Hi,

    You could try using this code.

     

    #cid_38 > span.form-product-item:nth-child(8),

    #cid_38 > span.form-product-item:nth-child(14), #cid_38 > span:form-product-item:nth-child(16) {

        height : 210px !important;

    }

     

    Make sure to remove all CSS codes the may be of a conflict, I cloned your form and I see excess codes on it. Here's the cloned form that I have: http://form.jotformpro.com/form/50253508365958. To clone it, use this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Here's a screenshot of my CSS codes, there shouldn't be any similar codes that conflicts the design of the other.

    How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 1 Screenshot 20

     

    Let us know if you need more help.

    Thank you.

  • ericablair
    Replied on January 26, 2015 at 7:47 PM

    Thanks so much. That improved things, but for some reason one of the items on my list is still appearing truncated ("Mary's Way Salve") until you click on it. Any ideas?How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 1 Screenshot 20

  • Charlie
    Replied on January 26, 2015 at 8:53 PM

    Hi,

    I see that your products have sub-category on them, and they are being hidden when the height does not match the minimum height of the product element. 

    How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 1 Screenshot 20

     

    Would you like to just even out the spaces and let the sub-category to show? If that is the case, you can remove the code I shared above and use this instead:

    .form-product-item {

        min-height: 250px !important;

    }

    You can try checking the change I made here in my cloned form: http://form.jotformpro.com/form/50253508365958

     

    But if you prefer giving them each product specific heights so that they won't be cut off, just let us know which ones you want to adjust. Or you can just separate them,

    Previous code:

    #cid_38 > span.form-product-item:nth-child(8),

    #cid_38 > span.form-product-item:nth-child(14), #cid_38 > span:form-product-item:nth-child(16) {

        height : 210px !important;

    }

    New Code. Just separate the element pointing the "Mary's Way Salve".

    #cid_38 > span.form-product-item:nth-child(8),

    #cid_38 > span.form-product-item:nth-child(14) {

        height : 210px !important;

     

    }

    #cid_38 > span:form-product-item:nth-child(16) {

        height : 240px !important;

     

    }

    The pink highlight is the one pointing to "Mary's Way Salve", so you just need to separate it and give it it's own height value.

    I hope this helps.

    Thank you.

  • ericablair
    Replied on February 2, 2015 at 6:47 PM

    Hi there,

    This worked, but I felt that the form itself was too narrow, so I tried to make the form wider. Now I am experiencing more problems than before. Both "Mary's Way Salve" and "Infused Flower" are truncated, and some (not all) of the product descriptions are appearing very narrow, rather than stretching to the edge of the parameters.

    I have adjusted the code above to display up til 350px, but still showing truncation.

    Screenshots of the truncated options:How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 1 Screenshot 40How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 2 Screenshot 51

     

    Screenshot of the overly narrow description text:

    How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options? Image 3 Screenshot 62

     

    Thanks so much, you guys are so very helpful.

  • Charlie
    Replied on February 2, 2015 at 8:50 PM

    Hi,

    You're welcome. I've cloned your form and made edits on it. Could you check if this styling works for you: http://form.jotformpro.com/form/50327796198973. If it works for you, you can clone it.

    Here's the styling I added.

    .form-product-item img {

        height : 250px;

        width : 250px;

    }

    .form-product-item br + br {

        display : block;

    }

    .form-product-item {

        min-height: 250px !important;

        width: 100% !important;

    }

     

    This should automatically adjust the width of each product item to full.

    Do let us know if this works.

    Thank you.

  • ericablair
    Replied on February 2, 2015 at 8:54 PM

    That worked! Awesome. You guys have the BEST customer service--especially for people like me who don't really understand CSS, it's a godsend! Thank you thank you!

  • Charlie
    Replied on February 2, 2015 at 10:05 PM

    Thank you for your kind words and you're very much welcome. I'm glad that everything is working in your end as expected. I do agree that not everyone are familiar with CSS, and our developers and management are trying their best to innovate our form builder, that includes the Form Designer, which lets users design more the form using tools, although it still needs quite a time to learn and there are things where we really need to use CSS. But, we're always here to help you as much as possible, so please do feel free to contact us anytime.

    Thank you for your continued support in JotForm. :)