Side by Side Matrix Question

Hi,

I am trying to create a side by side matrix question and tried to follow the css format as suggested in this link https://www.jotform.com/answers/659887-Want-to-run-a-survey-for-learning-and-development but couldnt seem to get it right. 

Also, how can I change the radio button to a red border and red dot inside when it is selected?

Thanks.

First you will need to shrink both matrix fields. Inside of this guide you can find more about form field positioning. 

https://www.jotform.com/help/90-Form-Field-Positioning 

And then increase width of your form to 900px and reduce horizontal padding to 5px.

Then you need to add this CSS code:

#id_5 .form-matrix-row-headers {

    width : 0px!important;

    border : none!important;

}

 

How to Inject Custom CSS Codes

Here is my demo form: https://form.jotform.com/70096910898973 

Feel free to clone it. 

Unfortunately it is not possible to change color of radio buttons.

Hope this will help. Let us know if you need further assistance.

Hi,

Thanks.

But from what I understand, am I right that my maximum width shouldnt be more than 690px if I want my form to look exactly the same on all kind of devices?

As for the radio button, I got inspired by one of your free theme 'Simplicity'. I like the radio button like the image attached below, but red colour instead.

Is it possible?

 

Hello,

First of all, If you are worried about if your form will be responsive to all kind of devices, I recommend you to add a mobile responsive widget to your form as you can find it at the following link: https://widgets.jotform.com/widget/mobile_responsive

"Am I right that my maximum width shouldn't be more than 690px if I want my form to look exactly the same on all kind of devices?"

You are not right. The form width will be adjusted automatically to 100% in mobile devices. You do not need to worry about changing the form width.

"As for the radio button, I got inspired by one of your free theme 'Simplicity'. I like the radio button like the image attached below, but red color instead."

You can inject the following CSS codes in order to make the radio buttons red as you can see the following screenshot:

input[type='radio'] {

    -webkit-appearance:none;

    width:20px;

    height:20px;

    border:1px solid red;

    border-radius:50%;

    outline:none;

    box-shadow:0 0 5px 0px red inset;

}

input[type='radio']:hover {

    box-shadow:0 0 5px 0px orange inset;

}

input[type='radio']:before {

    content:'';

    display:block;

    width:60%;

    height:60%;

    margin: 20% auto;    

    border-radius:50%;    

}

input[type='radio']:checked:before {

    background:red;

}

Please try. If you need any further assistance, let us know.

Thanks.

Hi thanks!

https://form.jotform.me/70091643958463

 

1. Why are the two matrix table not aligned?

I would like the two matrix table to be center of my form, with only 5px padding left and right.

Is it possible?

 

2. Is it possible to have a spacing between the row headers and the columns? Like separating the headers and columns with a white space.

 

3. Is it possible for my question text to be top center of my columns instead of top of the whole table? I would like both question to be on top of their own respective columns.

4. I have added the mobile widget, but I see that other than website format, the other devices are not the same.

 

 

Hello again,

I have cloned your form on my side in order to test it.

First of all, I have investigated your injected CSS codes and I have seen that your CSS codes have too much issue, too much redundancy. I recommend you please make your CSS codes clearer and delete some of them in order to avoid mistakes. You can use the following CSS formatter link in order to fix the codes: http://www.cleancss.com/css-beautify/

Please find your answers below:

"1.Why are the two matrix table not aligned? I would like the two matrix table to be the center of my form, with only 5px padding left and right. Is it possible?"

Because of the wrong CSS codes that you have injected. You have some wrong codes related to the width of the tables and width of the form. You also have too many redundant CSS codes.

I have injected the following CSS codes in order to set the matrix tables aligned as you can see the screenshot below:

#id_4{

width: 500px !important;

padding-left: 5px;

padding-right:5px;

}

.form-section{

width: 1000px !important;

}

.page-section{

width: 1000px !important;

}

.form-all{

width: 1000px !important;

}

.form-matrix-row-headers{

font-size:10px !important;

} 

"2. Is it possible to have a spacing between the row headers and the columns? Like separating the headers and columns with a white space."

Yes, you can inject the following CSS codes in order to put some space between the headers in order to set the headers as the following screenshot:

#subHeader_1{

padding-bottom: 10px; padding-top: 10px;

}

 

"3. Is it possible for my question text to be top center of my columns instead of top of the whole table? I would like both questions to be on top of their own respective columns."

 

Sorry, I could not understand properly. Do you want to set the question as the following screenshot below?

 

So, you can delete the sub-label of the header. Create a new HTML text and add it above the tables.

 

"4. I have added the mobile widget, but I see that other than website format, the other devices are not the same."

Maybe, you should write media queries for mobile phone. After, finishing your form design on PC, we can check it out together.

 

Thanks.

Hi.

2. Is it possible to have a spacing between the row headers and the columns? Like separating the headers and columns with a white space.

No I mean the first matrix table. Is it possible to separate the rows from the columns?

Hello,

Sorry for the confusion.

"2. Is it possible to have a spacing between the row headers and the columns? Like separating the headers and columns with a white space."

Firstly, you can add an additional column to the matrix  as you can see the following screenshot:

Secondly, you can inject following CSS in order to make invisible the inputs of that column as you can see the following screenshot:

#input_4_0_0{

display: none;

}

#input_4_0_1{

display: none;

}

#input_4_0_2{

display: none;

}

#input_4_0_3{

display: none;}

 

 

 

On the other hand, you can just inject the following CSS in order to set the matrix header to look different as the following screenshot:

 

.form-matrix-column-headers{

background-color: pink;

}

 

 

I hope this helps.

 

Thanks.

 

Hi,

https://form.jotform.me/70091643958463

 

1. As you can see, I added another matrix table.

I would like two matrix table to be side by side and center of my form.

 

2. I added an extra column on my first matrix table as you can see.

Can I make it invisible so that it separate from my row labels?

 

3. Also, my submit button cant be seen.

 

4. Can I remove all hover effect on my form as well?

 

Thanks.

Hello again,

Please find your answers below:

"1. I would like two matrix tables to be side by side and center of my form."

Please inject the following CSS codes in order to make your form as the following screenshot below:

#id_4{

width: 500px !important;

padding-left: 5px;

padding-right:5px;

}

#cid_5{

padding-left: 70px;margin-left: 70px;

}

.form-matrix-row-headers{

font-size:14px !important;}

 

 

"2. I added an extra column on my first matrix table as you can see. Can I make it invisible so that it separate from my row labels?"

 

Unfortunately, I've checked and I did not see any extra column. As I have already described in my previous answer, after adding an extra column you can make disable inside the column by injecting the following CSS codes:

 

#input_4_0_0{display: none;}

#input_4_0_1{display: none;}

#input_4_0_2{display: none;}

#input_4_0_3{display: none;}

#input_4_0_4{display: none;}

#input_4_0_5{display: none;}

However, you can not delete the borders.

"Also, my submit button can't be seen."

Because you have set the background color and the text of the button "white" in the CSS codes.

 

Please change the button color as the following CSS codes:

 

#input_12{

 

background: red !important;

 

}

 

 

 

 

"Can I remove all hover effect on my form as well?"

 

I tried to remove all hover effects. However, this time it caused a non-clickable form. 

Give me a little time maybe I will find a good solution but I do not promise.

 

Thank you!