How to change the text align and margin on the input table?

VenessaW

Asked on June 16, 2020 at 6:47 PM

May you also advise me for with the css code to align a text table to the margins please?
Kevin Support Team Lead

Replied on June 16, 2020 at 6:52 PM

It's possible to do that with this CSS code:

.form-matrix-table .form-textbox {

text-align: center;

padding: 20px;

}

Here are more details about the "text-align" property: https://www.w3schools.com/cssref/pr_text_text-align.ASP

The padding value can be either increased or decreased.

This guide will help you to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

I hope this helps.
VenessaW

Replied on June 16, 2020 at 8:43 PM

How do i get my text in my columns not to touch the border line , like an indent just to move it alittle
VenessaW

Replied on June 16, 2020 at 9:34 PM

Please can you assist me, i have been trying for days to get this for right

now my matrix tables lines are not all the same throughout the table and my form is not aligning properly.

i need this form urgently and need help please?

https://form.jotform.com/201656897733569
Kevin Support Team Lead

Replied on June 17, 2020 at 12:36 AM

How do i get my text in my columns not to touch the border line , like an indent just to move it alittle

Please inject the code provided above, this will move the text to the center and you can adjust the padding which will add a space between the text and the border, injecting the code will help you to view the result.

now my matrix tables lines are not all the same throughout the table and my form is not aligning properly.

I have cleaned the code of your form and fixed the form position, kindly replace all the current code with this one:

.form-header-group.hasImage.header-large {

border-radius : 10px;

border : 2px solid #fcf9f9;

}

.form-matrix-table {

width : 750px!important;

width : 400px!important;

width : 200px!important;

}

.form-line-error {

background : transparent;

}

.jotform-form {

padding : 0;

}

.form-matrix-values {

border-radius : 0;

}

#cid_48 th.form-matrix-column-headers {

position : fixed;

}

.form-matrix-headers.form-matrix-column-headers.form-matrix-column_1 {

text-align : center;

}

#input_20_17_1 {

margin : 0px;

}

th.form-matrix-column-headers.form-matrix-column_2 {

margin-left : 94px;

}

.form-sub-label {

font : 10;

color : #353839;

}

#sublabel_input_59 {

font-size : 11px;

font-weight : 300;

color : #0a0505;

}

#sublabel_input_115 {

color : #353839;

}

.form-dropdown {

border-color : #3AA8C1;

}

#input_115 {

font-weight : bold;

font-size : 14px;

box-sizing : 20px;

width : 20px;

border-color : #078faf;

border : 1px solid #9c9898;

background : #e4dfdf;

background-color : #aad9e9;

}

#input_96 {

font-weight : 400;

color : #0a0101;

}

.form-checkbox-item label {

font-weight : bolder;

color : #050404;

}

#label_input_96_5 {

color : #050303;

}

#input_114 {

font-weight : bold;

font-size : 14px;

box-sizing : 20px;

border : 1px none #575353;

border-color : #afaaaa;

background-color : #dcdada;

background : #b3eafc;

}

.form-header {

font-size : 35px;

}

#subHeader_99 {

font-size : 18px;

}

.header-logo-right {

position : sticky;

}

#label_20 {

padding : 31px 7px 7px 62px;

text-align : left;

}

#id_94 {

box-sizing : 150px;

padding : 20px 8px 18px 38px;

}

.form-line-column:nth-child(even) {

clear : left;

font-weight : bolder;

color : #050202;

}

.form-radio-item {

box-sizing : 12px;

width : 40px;

border : 1px solid #6c6a6a;

padding : 5px 0px 0px 0px;

border-radius : 30px;

background : #f7f4f4;

height : 30px;

background-color : #a7e3f7;

}

.form-all {

border : 4px solid #f7efef;

}

#cid_99 img.header-logo-right {

border : 2px solid #fcf9f9;

}

#label_95 {

margin : 7px 7px 7px 41px;

}

#id_95 {

padding : 1px 0px 1px 87px;

}

#label_input_96_1 {

font-size : 11px;

}

#label_94 {

font-size : 11px;

text-align : left;

}

.qq-upload-button.None {

padding : px 0px 20px 9px;

}

#cid_118 div.qq-upload-button {

margin : 0px 0px 0px 2px;

text-align : match-parent;

border-radius : 10px;

padding : 16px 5px 0px 0px;

font-size : 12px;

border : 2px solid #efe5e5;

}

#input_104 {

text-align : center;

}

.form-matrix-table tbody {

background-color : #3AA8C1;

}

.form-matrix-table {

margin : 14px;

}

#id_104 {

text-align : center;

padding : 14px 31px 18px 15px;

}

#cid_94 span.form-radio-item {

box-sizing : 35px;

height : 30px;

border : 2px solid #0586b1;

}

.form-radio-item label {

color : #0a0202;

font-weight : bolder;

height : 20px;

background-color : #91e4f7;

border-radius : 30px;

border : 1px none #7a7777;

}

#label_input_94_1 {

padding : 0px;

text-align : center;

font-weight : bolder;

}

#id_96 {

border-radius : 10px;

box-sizing : 500px;

padding : 21px 142px 1px 60px;

}

.form-checkbox-item {

width : 150px !important;

}

.form-multiple-column {

}

#label_input_94_0 {

padding : 1px;

font-weight : bold;

}

.form-radio {

color : #3AA8C1;

border : 2px solid #070000;

font-weight : bolder;

}

#input_20_0_0 {

border-radius : 0px;

border-color : #3AA8C1;

border : 1px solid #9a9595;

background : #f4f4f4;

}

.form-matrix-tr.form-matrix-value-tr {

border : 1px none #b1aeae;

background : url('//cdn.jotfor.ms/themes/img/CSSWizard/bgPatterns/1.jpg') repeat;

}

iframe {

width : 100% !important;

}

iframe {

width : 90% !important;

font-size : 11px;

font-weight : bolder;

border : 2px solid #17899a;

}

#input_94_0 {

clear : none;

}

#cid_103 > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > th:nth-child(2) {

width : 300px;

}

#cid_103 > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > th:nth-child(2) {

width : 300px;

}

#input_95 {

padding : 14px 37px 14px 55px;

}

.form-input-wide div {

font-weight : bolder;

color : #020101;

}

#cid_121 div.hoverSticky {

font-weight : bolder;

color : #0a0808;

border : 2px solid #2b92b4;

}

#id_121 {

border : 2px solid #2b939a;

font-size : 11px;

font-weight : bold;

color : #0a0808;

}

.qq-upload-button.None {

padding : px 0px 20px 9px;

}

#cid_118 div.qq-upload-button {

margin : 0px 0px 0px 2px;

text-align : match-parent;

border-radius : 10px;

padding : 16px 5px 0px 0px;

font-size : 12px;

border : 2px solid #efe5e5;

}

.form-input-wide div {

font-weight : bold;

color : #ffffff;

font-size : 12px;

}

#id_59 {

border : 1px none;

}

#cid_20 table.form-matrix-table {

border : 2px solid #1588af;

}

.form-input-wide {

border : 1px hidden #00efff;

}

#input_20_1_0 {

border : 1px solid #e1dfdf;

}

#cid_20 td.form-matrix-values {

border-radius : 10px;

border : 1px solid #cfcbcb;

}

.form-checkbox {

border : 2px solid #2f989f;

}

th.form-matrix-headers:nth-child(3) {

width : 100px!important;

border : 1px solid #5c5b5b;

}

.form-matrix-table {

width : 750px!important;

border : 2px solid #0d0000;

}

#input_20_7_1 {

border : 1px hidden #4a4848;

}

.form-textarea {

background-color : #e1e1e1;

border : 1px solid #524a4a;

}

.form-matrix-th {

background-color : #98dbf9;

}

#id_20 {

padding : 4px;

border : 1px none #ececec;

}

th.form-matrix-headers:nth-child(3) {

width : 100px!important;

}

.form-matrix-table {

width : 750px!important;

}

th.form-matrix-headers:nth-child(3) {

width : 100px!important;

}

.form-matrix-table {

width : 750px!important;

border : 2px hidden;

}

.form-all {

margin : auto;

padding : 2px;

}

#cid_20 th.form-matrix-headers {

background-color : #6DD0F2;

width : 150px;

border-bottom : 1px none;

padding : 0px 0px 0px 0px;

font-size : 11px;

font-weight : bold;

border : 1px solid #777575;

border-radius : 0;

}

#input_20_6_1 {

border : 1px solid #222121;

}

#cid_20 th.form-matrix-th {

border : 1px solid #727171;

background-color : #6DD0F2;

}

.form-textbox {

border-radius : 0;

border : 1px groove #9ceef4;

border-color : #3AA8C1;

background-color : #93daf1;

}

#input_20_18_1 {

border-radius : 0;

}

#input_20_0_1 {

border : 1px solid #0ea2b7;

border-radius : 0;

}

Regarding the input table background, may you please confirm how is the table supposed to look?

We will help updating the table background.
VenessaW

Replied on June 17, 2020 at 3:03 AM

Hi thank you so much, it looks much better, the matrix table must just be aligned to the page margins and fix so that they don't move.

The lines throughout the matrix must just be thin grey lines on white background, please.

Can the left items be given an indent so that it looks better, please?

Thank you so much for your help, i am rushing for a deadline that has already past and i truly appreciate your help.
Sonnyfer JotForm Support

Replied on June 17, 2020 at 6:24 AM

Hi @VenessaW,

the matrix table must just be aligned to the page margins and fix so that they don't move.

I'm not sure if I understood you correctly, I checked your forms and it seems to be aligned to other elements already.

The lines throughout the matrix must just be thin grey lines on white background, please.

I already see thin grey lines on a white background. If you're referring to something else, kindly send us screenshots to better illustrate your requirement.

Guide: How-to-Post-Screenshots-to-Our-Support-Forum

Can the left items be given an indent so that it looks better, please?

Kindly inject the below CSS code to achieve this.

.form-matrix-row-headers label{

margin-left: 20px !important;

}

Guide: How-to-Inject-Custom-CSS-Codes

Result:

If you need further assistance, please let us know.