Width of Input table field is not displayed correctly.

We have some problems with the size of the field "input table". We always set a default size for this field and then if you open the form, the size isn't the same. I attached some pictures for you.

Can you please put this CSS Code in Custom CSS Area:

.form-input, .form-matrix-table {

    width: 100% !important;

}

Please check the link below how to inject custom css on the form:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Let us know if you have any other question.

Hi Ardian_L

Thanks for your help, it worked with your code. After i insert your code, i saw that some other fields also changed. I attached some picture where you can see it. 
It is not the worstest thing ever see but if there is a possibility tho have it like befor, that would be nice because it take more space on screen now and befor the overview was better.

I already tried to change it with settings of the fields but i was not able to change it and i have no knowlegde about CSS.

If something not clear please feel free to ask me.

I apologize about that, I have removed that CSS Code and used another one:

@media (min-width:1024px){

  table.form-matrix-table {

      min-width: 678px !important;

      max-width: 678px !important;

  }

}

I have already replaced for you. Please let us know if you have any other question.

No problem, thanks that you looking into it. I checked it and now we are back to the first issue we had. I don't know if you have another solution or if we change back to first CSS-Code.

I have fixed this issue by removing the existing custom css code and injected the following custom css code:

.form-matrix-table {

    width: 100% !important;

}

I would suggest you to please test your form and get back to us if the issue persists.

We will wait for your response.

That's the solution, now it looks exactly like we like to have.

Thanks a lot, you are great!

Good Day Dear Jotform-Team

We have this issue again, i tried to insert the last CSS-Code in another Form we have but now it doesent works. PLease, can you have a look if i do something wrong? I already tried the other codes you noted here, i tried to clear Form-Cache and also with Browser-Cache.

PLease take following link as example:

https://form.jotformeu.com/71243706381352

Thanks for your help.

Please try adding the following CSS code to your other JotForm to display the tables correctly.

[data-type="control_matrix"] div {

  display: block !important;

}

Thank you!

Not that bad, they are all same size now but all on the right and not over the whole form as they should

I have checked your form from a clone version and I see that you haven't added the CSS codes provided by my colleague, Kiran, above.

Since that is the case, I suggest that you do this instead.

As part of the solution, I think it would be best if you set the Label Alignment of each Input Table field in your form to Top, but not set it as default so the other fields will not be affected by it.

Then, just add the following CSS codes to your form.

li[data-type="control_matrix"] table {

    width: 100% !important;

    max-width: initial;

}

th.form-matrix-column-headers {

    width: 72px !important;

}

Check your form after and it should look similar to the image below. The label on top of each table and each table extended across the form.

Otherwise, please feel free to let us know.

Hi

Sorry for my late answer. I tested it on different forms i created and with this code, all of them looks as we like to have them.

Thank you very much for your help :-)

Great! Glad to see that the issue is now resolved for you and thank you for updating us. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help. 

Thank you for using JotForm!