GravityWP

The best information about Gravity Forms, GravityView, Gravity Flow and other addons

Erik van Beek

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.

  1. Don't display the thead in the list
  2. Show column names below the list columns
  3. Style the columns in your list
  4. All the CSS used in this example
DEMO

Try it yourself (hit the +-sign)

Don't display the thead in the list

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_6_5 thead {
    display: none;
}

Show column names below the list columns

.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;
}

Style the columns in your list

.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;
}

All the CSS used in this example

#field_6_5 thead {
    display: none;
}

.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;
}
 
.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;
}

.gfield_list_cell.gfield_list_5_cell1 {
    width: 100%;
}

.gfield_list_cell.gfield_list_5_cell1, .gfield_list_cell.gfield_list_5_cell2, .gfield_list_cell.gfield_list_5_cell3, 
.gfield_list_cell.gfield_list_5_cell4 {
    display: block;
    float: left;
}

.gfield_list_cell.gfield_list_5_cell2, .gfield_list_cell.gfield_list_5_cell3, 
.gfield_list_cell.gfield_list_5_cell4 {
    width: 30% !important;
}

.gfield_list_cell.gfield_list_5_cell2, .gfield_list_cell.gfield_list_5_cell3 {
    margin-right:5% !important;
}

.gform_wrapper table.gfield_list td + td, .gform_wrapper table.gfield_list th + th {
    padding: 0 0 0 0 !important;
}