Question

Forms table spacing with CSS

Forms Version 10 Web Customizations

Updated May 14, 2021

asked on September 8, 2017

I am looking for a way to decrease the spacing between rows in a table. I have been able to increase the spacing by addressing the selector of the field in column 1 (.mytable .cf-field {height:50px;}), but I can't seem to decrease it. My guess is that I am not addressing enough of the elements in the row, so some auto spacing is keeping the height at a minimum to accommodate everything.

Referencing the image, I am specifically looking to compress the spacing between Row 1 & Row 2, or Row X & Row Y (all rows) more generically. I would also like to be able to make the rows themselves smaller in height. Any info on addressing table selectors would be much appreciated.

Thanks, .... Steven.

0 0

Answer

SELECTED ANSWER

replied on September 8, 2017

This CSS may do the trick for you. This assumes your table has a CSS Class of: myTable

.myTable td {padding : 0px!important;} 
.myTable .cf-field {padding : 0px!important;} 
.myTable td {height : 30px!important; line-height: 30px!important;} 
.myTable tr {height : 30px!important; line-height: 30px!important;} 
.myTable .parsley-errors-list {display : none;}

The !important flags force it to override other values pre-set by forms.

The first line removes padding around each cell in the column.

The second line removes padding around the input boxes themselves.

The third line reduces the height of each cell in the column.

The fourth line reduces the height of row.

The fifth line prevents the the warning message from popping up beneath each value. The downside is that you don't get the warning message at all, both indicating missing values and invalid values. So only do that if you are sure you want it. But without this, it adds 30px beneath each field even after the error is resolved. The fields themselves still display the red or green highlighting (assuming you are on the up-to-date version of Forms) but the warning messages don't appear at all.

This is what it looks like:

4 0

replied on September 11, 2017

Hi Matthew - this is super info. Thanks for taking the time to explain as well as show the info. I think I'll be able to use these elements in lots of our forms to improve the display.

Thanks again, .... Steven.

1 0

replied on December 12, 2018

Thanks Mathew. I just used this to cleanup a table, this also helps clear up all that extra white space between the row title and the data.

.col0 {width : 35px!important;}

Turned this

Into this

1 0

Replies

replied on April 29, 2020

Hi @Matthew Tingley @Chad Saar

I have a Table that looks like the following with the following CSS

.TimeCard .cf-table th {text-align:left;vertical-align:bottom!important;}

I applied the CSS suggested and the Table looks great, but it also appears to have affected the labels

.TimeCard td {padding : 0px!important;}
.TimeCard .cf-field {padding : 0px!important;}
.TimeCard td {height : 30px!important; line-height: 30px!important;}
.TimeCard tr {height : 30px!important; line-height: 30px!important;}

Thoughts?

Also, I'd like to better control the Width of the Labels in the Table (Not the Rows) to provide a way to get the Column Headers with multiline text to wrap where I prefer. Any suggestions on that is also appreciated.

0 0

replied on May 22, 2020

Hi Steve, not sure if you figured this out already or not but here are some ideas on how to target the header row and the column labels in CSS. Feel free to change the alignments/colors/styles to whatever you want, I just copied some CSS from one of my tables.

.TimeCard th {
  vertical-align: middle !important; 
  text-align: center !important; 
  background-color: #820222; 
  padding: 1% !important;
}
.TimeCard th .cf-col-label {
  font-size: 17px !important; 
  font-weight: normal !important; 
  color: #ffffff !important;
}

If you want to only change the line height of the table rows and not the header rows, you would want to change .TimeCard tr to .TimeCard tbody tr and if you wanted to target the header row, it would be .TimeCard th . That should point you in the right direction for the control that you want with the labels.

1 0

replied on May 22, 2020

Hi Chelsey, I had struggled through it but this is great info to have as well. Thanks for posting.

1 0

replied on May 14, 2021

Hi All

The code above had been working for me but now I've added a Checkbox field into the Row and that seems to have thrown a wrench into things. The Checkbox field doesn't appear to be affected like the other fields by the CSS if I inspect the table. Thanks for your help

0 0

You are not allowed to follow up in this post.

Question

Question

Forms table spacing with CSS

Answer

Replies

Sign in to reply to this post.