How to align and split boxes along with calculations

  • Profile Image
    NickCombs
    Asked on March 14, 2017 at 03:36 PM

    Hello,

    My name is Nick and I have a quick question about a form I created. It is a form that I found online a while back and tweaked to use as an expense form for my school district. Here is an example of the form: https://form.jotformpro.com/NickCombs/thales-academy-system-expensereport  As you may notice, above the area to fill in dates, it is showing expense 1 (this was not present in the past) and the alignment of the text and cells are not consistent. Is there any way to change these issues?

     

    I am also adding a screenshot of a pdf submission. Maybe you can tell me how to split the expense nine boxes and total calculations boxes.

     

    Warm regards,

     

    Nick

  • Profile Image
    BDAVID
    Answered on March 14, 2017 at 06:53 PM

    The problem is that each box is a field, therefor the alignment in the form is not consistent. What I would suggest you is to use a matrix field type.

    I have taken the time to recreate your form using the Input Table(Matrix) field, and the Configurable List widget for the dates. Here is how I have performed the calculations on each calculation widget from matrix columns: 

    So, to accomplish this layout:

    I injected the following CSS code in the form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #cid_153{

        margin-left: -70px;

    }

    #id_152 table.form-matrix-table input{

    width: 80px !important;

    }

    #label_153{

        visibility: hidden;

    }

    And the following CSS code inside the Configurable List widget:

    #customFieldFrame_153{

    height: 323px;

    }

    th {

        background: #ddd !important;

        height: 25px;

    }

    select{

        height: 31px !important;

    }

    .add{

        display: none;

    }

    You can test my cloned version: https://form.jotform.com/70726925554968 

    And clone it in your account if you want to: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Hope this helps. Let us know if you have more questions.

  • Profile Image
    NickCombs
    Answered on March 15, 2017 at 08:46 AM
    Thank you so much. That is excellent and extremely beneficial.
    Nick
    ...