Styling multiple columns List Gravity Forms

When you have some kind of repetition in your form (every time the same block), for sure the Gravity Forms List field is best to use. But sometimes it’s difficult to fit everything in one single row. With a little CSS you can change that easily.

Try it yourself (hit the +-sign)

List
Column 1 Column 2 Column 3 Column 4
List
Column 1 Column 2 Column 3 Column 4

How to do it?

To do this, it’s first important to loose the thead of the list. It’s better to show the column names below the column (as in the example).

To remove the thead:

#field_80_2 .ginput_container.ginput_container_list.ginput_list .gfield_list.gfield_list_container thead  {
  display:none;
}

Note that we don’t use only thead, but target it very specifically (in our case the list is inside field #field_80_2), so it will not influence other lists or tables used in Gravity Forms.

If you want to show the column names below the list columns, use this CSS:

.gform_wrapper ul.gform_fields.form_sublabel_above table.gfield_list td::before, .gform_wrapper ul.gform_fields.form_sublabel_below table.gfield_list td::after {
  content: attr(data-label);
  font-size: 14px;
  letter-spacing: .5pt;
  white-space: nowrap;
  display: block;
  clear: both;
}

First you have to change the fields into blocks and make them float left with CSS. Click on the column and check the CSS-class of the columns.

For the above example, we used:

.gfield_list_cell.gfield_list_2_cell1, .gfield_list_cell.gfield_list_2_cell2, .gfield_list_cell.gfield_list_2_cell3 {
    display: block;
    float: left;
}

.gfield_list_cell.gfield_list_2_cell4 {
    display: block;
    float: right;
}

Note: we display cell4 floating to the right instead of left (the 3rd column in the 2nd row), so it aligns perfectly with cell1.

Then you should set the width of the different columns.

.gfield_list_cell.gfield_list_2_cell1 {
    width: 99%;
}

.gfield_list_2_cell2, .gfield_list_2_cell4, .gfield_list_2_cell3 {
    width: 33%;
}

Tip: alignment of the cells in the list

Better to remove the padding on the left side of the columns, because it will look not very tight:

.gform_wrapper table.gfield_list td + td, .gform_wrapper table.gfield_list th + th {
    padding: 0 0 0 0px;
    padding-right: 9px;
}

Tip: solid line to visually seperate list rows

And for better visuals, we added a solid line on top of every list row, so it’s easy to see the different rows:

.gfield_list_cell.gfield_list_2_cell1 {
    margin-top: 20px !important;
    border-top: 5px solid #65a9cc !important;
}

Hopefully you liked this short tutorial how to break Gravity Forms list fields (and divide the columns over several, multiple rows). Any questions? Place a comment (or recommendation) below.

Tip: Where to find the css code?

You can click with your right mouse button on the list and click on ‘Inspect element’ (or open the developer panel in your settings). You will see (see in the picture) the code of the list and what ID (with a hashtag) and classes (with a point) you should use on your page.

Tip: Wrap your CSS code within a @media rule (with min-width)

Use the CSS @media Rule: http://www.w3schools.com/cssre… when you add the css code. That way, the list is also readable (and fillable) on mobile devices. If your list is only properly visible at a minimum width of for example 1120 pixels. Wrap around your css code for your list this media screen rule:

@media screen and (min-width: 1120px) {
//here your code
}

And check if your list than shows okay on lower screen resolutions.