How to align and split boxes along with calculations

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


    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:  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,



  • Profile Image
    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: 


        margin-left: -70px;


    #id_152 table.form-matrix-table input{

    width: 80px !important;



        visibility: hidden;


    And the following CSS code inside the Configurable List widget:


    height: 323px;


    th {

        background: #ddd !important;

        height: 25px;



        height: 31px !important;



        display: none;


    You can test my cloned version: 

    And clone it in your account if you want to: 

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

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