How to adjust Product list container and change the labels?

  • Scienceposters
    Asked on May 5, 2017 at 4:11 AM

    hello - i am havign issues with the forum and also this form - the script has got corrupted and also i have tried asking a question for help twice and no replly - hence resurrecting this post.

    The titles on the form (paper printin, fabric printing and delivery) now have the word "free" next to it - can this please be removed. Secondly the quantity choice boxes are no longer to the right of the descriptions - meaning the form is untidy and twice as long as it needs to be - can this be changed too? I would be most grateful if you could help please?

    many thanks

  • Nik_C
    Replied on May 5, 2017 at 5:01 AM

    I checked your form and I see what you're referring to:

    How to adjust Product list container and change the labels? Image 1 Screenshot 40

    The word Free appeared because the product doesn't have a price so it is automatically marked as Free.

    Regarding the QTY alignment I changed this two lines:

    How to adjust Product list container and change the labels? Image 2 Screenshot 51

    Or you can copy and paste the below CSS instead of your CSS code:

    .form-product-item .form-sub-label-container {

        float : right !important;

        display : block;

        position : relative;

        margin-top : -24px!important;

    }

    .form-product-item .form-sub-label-container {

        margin-right : -66px!important;

    }

    .form-product-item.hover-product-item {

        width : 450px;

    }

    .form-submit-button {

        margin-left : -193px;

    }

    .form-special-subtotal {

        margin-top : 25px;

        margin-left : 250px;

    }

    #input_1_quantity_1003_1 {

        width : 50px;

        margin-top : 35px;

    }

    #input_1_custom_1003_0 {

        width : 150px;

        margin-top : 35px;

    }

    #label_1 {

        font-size : 16px;

    }

    .form-dropdown {

        width : 50px;

    }

    .form-description {

        margin-top : 55px;

        margin-right : 510px;

        width : 375px !important;

        max-width : 375px !important;

    }

    #coupon-container {

        width : 400px !important;

    }

    input[id*="1017"], input[id*="1018"], input[id*="1019"] {

        display : none;

        pointer-events : none;

    }

    input[id*="1017"] + label > .form-product-details, input[id*="1018"] + label > .form-product-details, input[id*="1019"] + label > .form-product-details {

        display : none;

    }

    label[for*="1017"],label[for*="1018"],label[for*="1019"] {

        font-weight : bold;

        text-decoration : underline;

        pointer-events : none;

    }

    And it will align them like this:

    How to adjust Product list container and change the labels? Image 3 Screenshot 62

    Regarding the wording Free, I'm still checking how to adjust that, I'll get back to you with my findings.

    Thank you!

  • Scienceposters
    Replied on May 5, 2017 at 5:20 AM

    thankyou - if you could just save my form with the changes I would be most grateful

  • amy
    Replied on May 5, 2017 at 7:00 AM

    Hi,

    Would you please let us know the URL of your form? Also, please confirm us to operate on the form via this thread. Otherwise, we will not be able to take any action on your form without your permission. 

    We'll be awaiting for your response.

    Thanks in advance.

    Kindest Regards.

  • Scienceposters
    Replied on May 5, 2017 at 8:07 AM

    I've already asked if you can make the changes on my previous comment?! I hereby authorise you to make the changes that I want - is that ok?

    my form is hosted here https://www.scienceposters.co.uk/thanks2.htm

    https://form.jotform.com/61401339504952

     

    maybe it just needs making wider too - the 10.80 has dropped onto the next line also - but please can you help - it was perfect until the upgrade...I have made no changes at all

     

  • amy
    Replied on May 5, 2017 at 9:49 AM

    Hi,

    I would like to inform you that I have injected the Custom CSS codes which my colleague has shared as per your request. We can guide you to change your forms yourself. Because of this reason, we cannot apply all custom changing requests. 

    You can change the width of your form in the Advanced Designer panel. Please click on the "Form Designer" button and then open the "Advanced Designer".

    How to adjust Product list container and change the labels? Image 1 Screenshot 40

    How to adjust Product list container and change the labels? Image 2 Screenshot 51

    Then please change the width of your form from the "Form Layout" tab.

    How to adjust Product list container and change the labels? Image 3 Screenshot 62

    If you need any further assistance, please let us know.

    Thank you.

     

  • Scienceposters
    Replied on May 5, 2017 at 10:23 AM

    thankyou for this. Ok hopefully last couple of things - the Royal Mail Special Delivery option has the 10.80 GBP on the next line - can this be made to the right (ie one line)? Can all the quantity boxes be moved slightly to the right - at the moment it is overlapping with the A4 handouts option. And lastly - is there any way to remove the "Free" which is after each header?

    many thanks

  • RyanC
    Replied on May 5, 2017 at 11:58 AM

    I think this solves your problem. Just add these CSS codes

     

    .form-product-item.hover-product-item {

        width: 550px;

    }

     

    .form-checkbox {

        margin-right: 2px;

    margin-top: 7px;

    }

  • Kevin Support Team Lead
    Replied on May 5, 2017 at 12:08 PM

    @Scienceposters,

    I can see on your CSS code you have reduced the width for the products item container to 450px: 

    .form-product-item.hover-product-item {

        width : 450px;

    }

    If you either remove that code or inject the one below, you will notice the product names will display in one  line only: 

    .form-product-item.hover-product-item {

        width : 100%;

    }

    It may also be required to increase the form's width, you could do it by following the steps given by Amy above. 

    Regarding to hide the "free" word after the product section, this code should help you to get rid of it: 

    span.form-product-item:nth-child(2) .form-product-details, span.form-product-item:nth-child(10) .form-product-details, span.form-product-item:nth-child(30) .form-product-details {

        display: none;

    }

    To get the check box and product name aligned, you could achieve it by injecting this code: 

    .form-product-item .form-checkbox {

      margin-top: 7px;

    }

    The same code given by @RyanC, but specifying that only check boxes inside the ".form-product-item" class should be affected, otherwise all the check boxes on your form would be affected for this code. 

    Please, check my cloned form where you can see the result of injecting the given code: https://form.jotformpro.com/71244453109956 

    Hope this helps. 

  • Scienceposters
    Replied on May 8, 2017 at 3:52 AM

    this cloned form is perfect - can you please amend my form - I've already given permission for this to happen in this thread. I cannot see the cloned form on my account to use it. thanks!

  • Chriistian Jotform Support
    Replied on May 8, 2017 at 3:59 AM

    Hi,

    To clone the demo form of my colleague to your account to use it, please refer to this guide on How to Clone an Existing Form from a URL.

    Thanks.

  • Scienceposters
    Replied on May 8, 2017 at 4:05 AM

    thanks Chriistian - however I would be much happier if my form were just amended - otherwise i'll have to redo my entire website and reupload the entire website to my server. As per the numerous comments and permissions can the script just be applied to my form and saved? please? feel like i'm going around in circles here!

  • Chriistian Jotform Support
    Replied on May 8, 2017 at 4:27 AM

    As per your request, I have now added the custom CSS provided by my colleague to your form and also adjusted the form width.

    Please let us know if you need further assistance.
    Regards.

  • Scienceposters
    Replied on May 8, 2017 at 4:37 AM

    thankyou very much