How can we decrease the spaces between fields?

Hi, 

We are trying to make a set of fields look like a matrix and this is because we want to be able to present different field types together. 

We have looked at the configurable list but unless this can be configured further to be made neater, we would like to look at CSS code to inject into single drop downs / text boxes to be able to align them next to / under each other.

The reason for this is that we want to be able to present different field types and int he case of the drop down - different options for each question in a sense, 

Can you help?

Thanks,

I have just reviewed your form and noticed that you have been playing around with various fields. To assist you better can you please indicate exactly what you wish to accomplish. If you can explain the type of fields you would like to add in the matrix.

We will be glad to assist you creating CSS to create the matrix you are looking for.

Hi, 

thanks you for your response, 

I have outlined the 2 types of matrices I would like to create, 

The first one:

- there would be a series of static text fields and static numeric fields. where we have indicated 'fillable' is where the user will input a numeric value.

- the calculated column - for each line item would just have the value then of whats filled in the orange block, the Total score bock, next to 600, would have to be a calculated field.

we are happy if the calculated score portion is a separate field but below, looking like it is a part of the matrix.

The second one: 

As the headers state again, there would be text fields (static), the fillable would be a drop down of numbers 1 - 5, others with numbers -5,0,5, then a separate matrix with free text, 3 columns for the user to input,

the total column under fillable (30) would also have to be a calculated field,

Please see the image screenshot below, I hope these are specified clearly, 

your help would be greatly appreciated, 

Thanks, 

Unfortunately, the matrix field can only handle one type of input. It cannot be a mixed of number field, drop down, calculations, etc... 

However, the matrix field can be used in form calculation, you can learn more about it in this guide: https://www.jotform.com/help/343-How-to-Perform-Form-Calculation-in-the-Matrix-Field 

Another possible thing that you can use is the configurable list widget, here's a guide about it: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget. It allows you mix different input types in a row like manner. But unfortunately, this widget does not allow calculations. 

Perhaps the Spreadsheet widget would work for you? Here's a link to it: https://widgets.jotform.com/widget/spreadsheet. You can do calculations on it, although you cannot setup input types on each cell or column.

I hope that helps.

Hi, 

If you followed carefully my threads above, you will see that i am well aware that the matrices only allow one type pf input, 

My request is for some CSS code to be able to ALIGN matrices up next to each other to make them look like one - or as closest as possible, 

As I said, the configurable list would be good, but needs to be formatted more elegantly, 

I will look into the calculations, and into the spreadsheet widgets, 

it will be great if you could assist with possible code to make the matrices show up close next to each other, 

Thanks,

Please provide us ID of the form you are working on and we will help you to position your matrix tables with CSS code. 

Also here is a demo form I made, with spreadsheet widget, of the first table you provided:

https://form.jotform.com/61111308959960 

Feel free to test it and clone it.

Looking forward to your reply.

how do I decrease space between textbox fields vertically?

The form im working with https://form.myjotform.com/61083823492558

Are you referring to individual text boxes or the ones in the matrix field?

There are a lot of things going on your form and not sure what text boxes you are referring to:

In your Form Designer Tool, you can click on a text box and adjust its height and padding. 

You can also check the "Line Layout" section where you can adjust the spacing of the fields.

You also have errors in your CSS code, you have type important!; instead of !important;

If you wish to have the vertical spaces of your text boxes in the matrix field to be narrower or smaller, like on this screenshot:

If that's what you would like to do, you can use this custom CSS code:

td.form-matrix-values {

    padding : 0 0 !important;

    border: none !important;

}

I would also like to suggest that you open separate threads for the other concerns that you have, that would help us avoid confusion and for us to better assist you. Thank you.

Hi, 

Thanks for this, 

Please try and understand from our point that we are working on one form, as much as we may want to open different threads, our queries are not far off related. 

Thank you for your help, 

I will try as requested, 

Im sure that if you looked at the form, you woud gather that the matrices 'hanging in the air' look like what I am trying to achieve, 

Yes, it would be the 3 single textboxes on their own, 

I have corrected my CSS errors since and will try the code you have highlighted in green

Thanks, 

I have inspected your form and matrix tables on your form look like this now. 

I saw that you added custom CSS codes to style them. I also saw that you did not add CSS code my colleague provided you. Please try it and let us know if you need further assistance. 

Hi, 

Thanks for the code, it was not what we are looking for, 

However, 

I have three matrices below - as from my form, 

the second and third ones - 

Red:

We want to be able to use the column - if its possible to only e.g. show the first column from a matrix with the header - obviously with no padding so they are next to each other

We also want to get rid of that grey block in the top corner

Blue: 

is it possible to use only the row names and hide  / delete the columns?

For the looks of it, it seems like you have already merged the two matrix fields that you have. You have also removed the column headers. Here's how it looks like in your test form:

The second matrix has 4 columns, based from your last reply you wish to remove all the columns on it and leave the 1st column only? The one with the question rows?

Now regarding the one circled in "Blue", you wanted to remove the textbox fields and just want to display the 1st column which shows "Absolute", "Rating", "Absolute", "Rating"? I am not really sure what is the purpose of it. If you wish to remove the input fields in the 3rd matrix field then that is possible using this custom CSS code:

#cid_45 > table > tbody > tr > td {

    display: none !important;

}

This is how it will look like:

Let us know if that will work for you.

Hi Charlie, 

Thank you for your help, 

Thats correct, in the meant i found a way to do some of the stuff i needed, 

Regarding the column (row questions) with Absolute.... etc, i want to use the row questions only - as they go in line very well with the others, the same for where I have 'Y Y N N'  -i want to have these next to each other.

what happens is when i save the form  and come back in , these matrices automatically get the columns back again (e.g when i click on the columns button, the options for 'very satisfied, etc' come up). Thanks for the code, I will try it,

I do have a further question but will get back to you later on that, 

Thanks, 

how do we disable the matrix labels ?

like below - so we can place the matrices directly under each other?

You have to add a placeholder in each header depending on the number of rows/columns that you will add in the matrix. You can then just hide it by adding a custom CSS codes in the form. I just checked your form and it seems you did this already.

With regards to the adjustment in the spacing between matrix fields, just add the following custom CSS codes:

li#id_52,

li#id_53,

li#id_54,

li#id_55,

li#id_56,

li#id_57 {

margin-top: -36px;

}

I'm sorry, the CSS codes works, but the alignments are off when I saved the form. I think you're also getting this issue. I'm now adding a few CSS codes to fix the alignment.

A little adjustment to the previous codes and then a few more for the matrix alignments. Overall, here are the correct codes to add:

li#id_52, li#id_53, li#id_54, li#id_55, li#id_56, li#id_57 {

    margin-top: -42px;

}

li#id_45, li#id_49, li#id_41 {

    margin-left: -231px;

}

li#id_47 {

    margin-left: -138px;

}

li#id_54, li#id_55, li#id_56 {

    margin-left: -231px;

}

li#id_57 {

    margin-left: -138px;

}

Here's a cloned version of your form showing the changes: https://form.jotform.com/61153564225956. 

Thanks very much, works great! trying to remove the hover background

is it possible?

To remove the highlight for the matrix fields, add these codes:

[data-type="control_matrix"].form-line-active {

background: none !important;

}

Remove [data-type="control_matrix"] if you wish to remove the highlight for all fields. 

Hi Welvin, 

Thank you for this, 

it seems to have worked, 

Just to put you in a bigger picture, 

Im going to have a lot more matrices like this that im going to be joining up, 

in some cases it could even be a one line inbetween..

I have found a new problem....

if you look where the matrix splits e.g. between d and a - i am unable to select that dropdown or the textboxes - i think its coz the matrix "outline?" seems to block this, 

can you help?

Another thing, 

im trying to get labels to work on the top most set of matrices,

the alignment goes off and i expect that, how best could i format this? they have to be in line with the "column" but then the alignment of the label and then of the matrix goes off

Please help, 

Thanks,

Personally and honestly speaking, I believe this is not the best way to redesign your form. You are repositioning the matrix fields to look like one big matrix and some of the text boxes are hidden, some overlaps the labels, etc... Most of the time, you'll encounter problems like it is not mobile responsive, it shows completely different on mobile devices, the actual submission output shows a lot of empty cells that doesn't really hold any value because they are hidden, and some more. 

Other disadvantages is that this is hard to maintain, if you want to add a new matrix field or redesign the form, you'll most likely to break the CSS code and redesign it again.

As an example, and you have already noticed it, the last row drop down field in the first matrix table is not clickable. This is because the matrix table below it is overlapping and they are too close. Here's a screenshot:

This happens because by default, the matrix field will always have a table row for the column headers, that's the one overlapping the letter "d)" option in your top matrix.

We can hide the table row for the headers however, the table itself has a height good for the specific number or rows that the matrix field that it has. We can try looking for a CSS code for this, but if you are planning to design or join more matrix fields, then I believe problems will continue to arise. The best approach that I think of is for you to download the full source code, and redesign the matrix tables there. But you might need to hire a developer to make sure that the source code will still work after customizing it.

Hi Charlie, 

Thank you very much for your response, 

I do understand that we are trying to achieve much here, 

We would also need this to be optimised for mobile so thank you for pointing this out to me, 

What I would like to then find out is a more simpler approach being: 

1. The possibility of us customising columns in a matrix to be read only (text we can set)

2. Being able to colour certain columns in a matrix which I assume is possible, 

This would simplify things for us in that having 

a) simpler css code

b) lesser, less complicated matrices which im sure would be more optimised for mobile?

Please let us know your thoughts?

I cloned my colleague's form and made some edits on it regarding the overlapping of fields: https://form.jotform.com/61161626321951. However, the labels on the top of your matrix fields will not show because you already have another CSS code that totally hides them. Here's one:

Now if you remove that CSS code, you can setup a label in the matrix field, however, that will also break the initial alignment that you have in your matrices. This means you then need to adjust the values of your CSS code for the alignment to work.

As mentioned earlier, for this to work, it would be best to come up with a mockup design, finalize it, then find the best approach that will work for you.

1. The possibility of us customising columns in a matrix to be read only (text we can set)

This one is tricky but I believe it is possible. If you would like to set a text box with a text on it BUT is read-only. Please note that one matrix field can only have ONE type of input. This is the limitation mentioned in the earlier part of this discussion and a thing that you need to consider. I mentioned this because your matrices have a combination of drop down and text boxes.

2. Being able to colour certain columns in a matrix which I assume is possible, 

Coloring specific columns should not be a problem. This can simply be done by CSS code.

If those are the changes that you would like to implement on the matrix fields, and not really joining them, then I believe it is possible. Could you share us a sample matrix table that with those changes? I understand that you have already shared to us different forms but I am not sure what is the final design or contents of it. If you could share us a sample matrix table for the two changes you mentioned above, then we'll try to give you a more comprehensive solution for it.

Thank you for your cooperation.

Hi Charlie

RE: your first response, i totally understand the conflicts, I had been taking the code off n on to check, but since we are using a different approach, please see my response to the latest reply above:

I have cloned my form - removed all CSS and the matrices and added a new matrix, please see explanation of fields: 

This is one type of matrix we are trying to create:

ALL fields will be TEXT

1. Input Text - user will enter a score from -5 to 5

2. Read Default - this will be 5 - default and read only

3. Read Default - this will be either "Absolute / Rating" - default and read only

4. Read Default - "Y" or "N" - default and read only

5. Input Text - user will enter a person's name

6. Input Text - user will enter comments - setting this field wider wont be a problem

7. Input Text - user will enter date (we are happy with free text)

link below: 

https://form.myjotform.com/61162492939564 

Please be informed that we will have about 13 matrices like this - varying in number of questions but with the same layout

The second matrix is a similar story

1. Read Default - "100" or "1"

2. Input Text - user enters values

3. Read Default - default read only "100"

4. Read Calculated? - I will get back on this its either going to be what the user enters in column 2 or user enters a value again.

The total fields work fine, I would just have to along them up and int eh second matrix, add another text box with a default read only value of the total possible score next to the calculated score.

Please inform us of your thoughts, 

Thanks you very much, 

Unfortunately, adding a content into the input boxes using a custom CSS codes is not possible. The best way to accomplish everything in the matrix would be to use get the source codes and do the modifications there. But as originally mentioned by Charlie, finalize the form first, add all the needed fields in the form then add the styles if you wish using the designer. You can also apply a theme from the theme store.

For the mobile responsiveness, I think we can deal with it later on.

This is a very tough one for us, 

Sorry, im looking for all possible solutions here.. 

is it then possible for us to configure the configurable list any further to get it to look like the matrix we want to build (a)

can we configure the configurable list in our matrix (containing Static Text) to fit in place of where we have "5" "Aboslute" "Y/N" - in this case, we could have the first matrix with just one column - free text, the configurable list carrying all the static text and then a final matrix with 3 columns for further free text

Please inform us?

With configurable list widget, you can specify different types of input in each column. But there are still issues that you'll encounter. For example, you cannot have a different static text in each row. Well, you can add a custom CSS codes to hide the static texts and replace it with something else, but the end result (email, submissions page) will still show the original text. 

You cannot have a default value for the textbox input so you'll be using a dropdown in order to do this in the configurable list widget.

I'm not really saying that it's not possible, but would require a workaround to change some properties in the field. 

This is an example form: https://form.jotform.com/61164572485965. 

You have to decide what to use. Both should work, but modifications are required to fully accomplish everything. 

Hi, 

Thanks for this, the form is unfortunately not found, 

I understand the workaround and am trying to find any possible solution here.

Will the spreadsheet widget then accomplish what I am trying to achieve?

I am happy to open a separate thread for this if required - but I would need to customise to achieve what im trying to as per the matrices above, is it at all possible?

Please help, 

The form is up. Can you check again?

Yes, we can try the spreadsheet widget. I think it's easier to setup the default input as well the read only using this widget.

I've created this test form: https://form.jotform.com/61183475597972. Further adjustments are possible, styles using CSS codes. 

With spreadsheet widget, a calculation is also possible. 

By the way, I'd suggest creating a new thread for this form. The instructions are in the widget configuration. If you have some questions, add it in the new thread.