CSS: Make Input Table wider without scrollbar

In the form linked below none of my tables appear to be at 100% of capable width. There is a lot of additional space on the right side.

When I try and add table width under the Options setting of the properties it creates a scrollbar. I don't want that. When I add css to say #id_115 { width: 100% !important;} that did nothing. Any thoughts?

Hello UCIAcademicPersonnel,

Thanks for reaching out to Jotform Support. Please try to add this custom CSS code to have an even space. You can open this link and follow the steps on how to add the custom CSS code to your form.

li#id_115 {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-evenly;

}



li#id_123 {

    display: flex;

    justify-content: space-evenly;

    align-items: baseline;

}



li#id_125 {

    display: flex;

    justify-content: space-evenly;

    align-items: baseline;

}

Here's what it looks like on my cloned form:

Give it a try and let us know how it goes.

Hi Jan,

Thank you for this help, however, I want the table itself to display wider not be centered.

Is there a way to do this?

Best,

Eva

Hello UCIAcademicPersonnel,

You can target the tables and change their width to 100% by adding CSS code below to your form:

/* Adjust the matrix table to 100% - 25575771 */

.form-matrix-table {

width: 100% !important;

}



li[data-type="control_textarea"] div[data-layout="full"], li[data-type="control_fullname"] div[data-layout="full"], li[data-type="control_matrix"] div[data-layout="full"], li[data-type="control_address"] div[data-layout="full"], li[data-type="control_fileupload"] div[data-layout="full"], li[data-type="control_appointment"] div[data-layout="full"] {

max-width: 100% !important;

}

/* code ends here */

Here's the result:

Give it a try and reach out again if you have any other questions.