Spreadsheet Widget: How can we customize widget text and size?

Also, can we center the text? Increase the width?

Please, try injecting the following code to your form. This one helps to center the text: 

.cell-input {

    text-align: center !important;

}

And this one will help you handling the cells width: 

tr td{

    width: 200px;

}

This guide will help you to inject the code to your widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

I hope this helps. 

Sorry did not work.

I have checked your form http://www.jotform.us/form/71947041484157 and noticed that you have not added the code to your widget yet. 

Could you please add it and let us know? 

We  will be glad to further check your form. 

Hi, sorry about that, I now know where to add the CSS code for each individual widget, thank you.

I still need to have some of the fields show all the text that is in them, can we have a 2 or 3 lines of text inside one field, as you can see from the screenshot the text is being cutoff.

Also, can the table be wider as the you can see there is still more space on the right and it could help show the all the text in some of the fields?

And last, can check boxes be added next to the prices so it can a total on the bottom?

Thank you again.

James

Please paste the below CSS to your Custom CSS Field:

iframe#customFieldFrame_54 {

    position: relative;

    width: 600px!important;

}

And copy and paste the below code in the Custom CSS of the widget:

.cell-input {

    font-size: 10px!important;

}

td.B {

    position: relative;

    width: 90px;

}

td.C {

    position: relative;

    width: 258px;

}

td.D {

    position: relative;

    width: 115px;

}

The first one will increase the widget's width, and the second one will increase all columns that are in code and it will decrease font size. I had to do that so it will fit all cells, otherwise, it will require the form to be wider.

Here is how it looks like:

Also, feel free to check my clone of your form: https://form.jotformpro.com/72055529985973

Regarding check boxes, unfortunately, I don't think it is possible since you can not include a particular cell in the calculation so it wouldn't be possible to sum certain (or all) cells when the checkbox is clicked. Bottom line, there is no interaction when the checkbox is clicked that will affect particular cell/column in spreadsheet widget.

Let us know how that works for you.

Thank you!

Thanks for the code it has helped tremendously, but we still need to figure the most important item, adding the cost of the classes, if we cannot do check boxes what do you recommend so we can add those fields? 

Thank you again much appreciated!

You're welcome, we're glad we could help. 

Regarding the last question, how do you mean adding the cost of the classes? The prices on the right-hand side are prices for classes, right?

How do you want them to add and where? And how checkbox should work there?

Please give us a workflow example so we can review possibilities.

We'll wait for your response.

Thank you!

As you can see above, the parents need to select which classes they want to choose and buy for their child, so they need to be able to select one or more classes and get added at the bottom to the right of Total and on the bottom of the prices column. So we don't what could work, 

If you only need to get a total then you could just add a formula: 

Please, give it a try and let us know if you have any question.