Reduce width of the Form Calculation Widget

  • shinjub
    Asked on November 3, 2021 at 9:01 AM

    Hi Support,

    Can I reduce the width of the calculation box?

    1635944443 618287fb1239a  Screenshot 10

    Thanks.

  • bestupwork
    Replied on November 3, 2021 at 9:14 AM

    Hi There,


    Thank you for reaching out and for sharing the details of your requirements. Please follow the steps given below to change width of the calculation box.

    1. Log in to your account and open the form in question.

    2. Select the calculation field you want to decrease the width of the text box.

    3. Click the Properties button (gear icon).

    1635945193 61828ae90ed13 properties Screenshot 10

    4. Go to the Options tab and change the Width text box to your own preferences.

    1635945268 61828b344034e width Screenshot 21

    Do let me know if you still face any issue so that I can assist further.


    Regards,

    Rahul Aggarwal

  • shinjub
    Replied on November 3, 2021 at 9:17 AM

    Hi Rahul,

    Thanks for your reply.

    Mine is the calculation widget. Can I reduce the width for this widget?

    Regards

  • roneet
    Replied on November 3, 2021 at 9:25 AM

    Unfortunately, it is not possible to reduce the Form Calculation widget via the settings.

    To reduce the width of the Form Calculation field, you may do it via CSS. Please inject this CSS in the Form Designer. Please follow this guide to add the CSS in your form:

    https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    #id_15 {

     width: 110px;

    }

    Do you want to adjust the Form Calculation widget on the same line after the field "Total"?

    Let us know how you would like to do?

    Thanks.

  • shinjub
    Replied on November 3, 2021 at 9:37 AM

    Hi Roneet,

    I would like to remove the Total box and replace it with Calculation

    1635946619 6182907b9854f  Screenshot 10

    Can you please guide me how to go about it.

    Thanks.

  • Gaetan_B
    Replied on November 3, 2021 at 9:52 AM

    Hello,


    As indicated by my colleague, you can inject the following custom CSS (https://www.jotform.com/help/117-how-to-inject-custom-css-codes/):

    #id_15 {
      width: 110px;
    }


    And delete your field named Total.


    Best regards

  • shinjub
    Replied on November 4, 2021 at 6:16 AM

    Hi Gaetan,

    Thanks for the prompt reply.

    I have tried but some error occur starting from item no. 6. The calculation widget did not reduce as what I did to the first 5 calculation widget box.

    1636020845 6183b26d8244a  Screenshot 10

    https://www.jotform.com/build/213054001430030

    Can you please help.

    Thanks.


  • Vick_W Jotform Support
    Replied on November 4, 2021 at 7:08 AM

    Hi there,

    Looks like everything is already in order. Here is a screenshot of your form.

    1636024087 6183bf1793afc  Screenshot 10

    Let us know if you need further assistance.

    Thanks

  • shinjub
    Replied on November 5, 2021 at 7:42 AM

    Hi Vick,

    Thanks for your prompt reply.

    I think my connection is slow earlier that is why is not reflecting. Now everything is in order already.

    Regards