Reduce width of the Form Calculation Widget

  • Profile Image
    shinjub
    Asked on November 03, 2021 at 09:01 AM

    Hi Support,

    Can I reduce the width of the calculation box?

    1635944443_618287fb1239a_

    Thanks.

  • Profile Image
    bestupwork
    Answered on November 03, 2021 at 09: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.png

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

    1635945268_61828b344034e_width.png

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


    Regards,

    Rahul Aggarwal

  • Profile Image
    shinjub
    Answered on November 03, 2021 at 09:17 AM

    Hi Rahul,

    Thanks for your reply.

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

    Regards

  • Profile Image
    roneet
    Answered on November 03, 2021 at 09: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.

  • Profile Image
    shinjub
    Answered on November 03, 2021 at 09:37 AM

    Hi Roneet,

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

    1635946619_6182907b9854f_

    Can you please guide me how to go about it.

    Thanks.

  • Profile Image
    Gaetan_B
    Answered on November 03, 2021 at 09: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

  • Profile Image
    shinjub
    Answered on November 04, 2021 at 06: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_

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

    Can you please help.

    Thanks.


  • Profile Image
    Vick_W
    Answered on November 04, 2021 at 07:08 AM

    Hi there,

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

    1636024087_6183bf1793afc_

    Let us know if you need further assistance.

    Thanks

  • Profile Image
    shinjub
    Answered on November 05, 2021 at 07: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