Displaying list field as rows [RESOLVED]

[user615adf414469c208]

Hey GravityForms community! Think I’ve got a tricky one for ya

I have a list field with a lot of columns. This displays great on mobile, but horribly on desktop. I have 12 columns and I want to display each list entry as a grid of 3 columns by 4 rows stacked on top of each other. I’ve tried with CSS but can’t get it right. I can sort of get it right for 1 column but then adding a second list item breaks it.

Here’s what I’m trying to achieve in desktop view:

Does anyone know of a way of achieving this layout? Or of forcing the list field to display like it does on mobile with single stacked columns, and new list items displaying in blocks with new column headings?

Thanks in advance for any guidance/ideas!

[uamv (Joshua Vandercar (Gravity Forms))]

Give this a go. I’ve seen it used before to render the mobile view for lists at larger screen sizes. You will want to add form/field-specific selectors or a selector based on your custom CSS class in order to restrict to specific fields. This applies the mobile stack layout, but could possibly be altered to render a three column layout.

@media (min-width:640px) {
	body .gform_wrapper.gravity-theme .gfield_list_header {
		display:none;
	}
	body .gform_wrapper.gravity-theme .gfield_list_group {
		display:block;
		border:1px solid rgba(0,0,0,.2);
		padding:16px;
		margin-bottom:16px;
	}
	body .gform_wrapper.gravity-theme .gfield_header_item,
	body .gform_wrapper.gravity-theme .gfield_list_group_item {
		width:auto;
	}
	body .gform_wrapper.gravity-theme .gfield_list_group:last-child {
		margin-bottom:0;
	}
	body .gform_wrapper.gravity-theme .gfield_list_group_item:not(:last-child) {
		margin-bottom:8px;
	}
	body .gform_wrapper.gravity-theme .gfield_list_group_item:before {
		content:attr(data-label);
		font-size:14.992px;
	}
	body .gform_wrapper.gravity-theme .gfield_list_icons {
		width:auto;
		background-color:rgba(0,0,0,.1);
		margin:16px -16px -16px;
		padding:12px 16px;
		line-height:0;
		text-align:left;
	}
	body .gform_wrapper.gravity-theme .gfield_header_item+.gfield_header_item:not(:last-child),
	body .gform_wrapper.gravity-theme .gfield_list_group_item+.gfield_list_group_item {
		margin-left:0;
	}
}

[user615adf414469c208]

This worked like a charm, thank you!

To achieve the 3 column layout for anyone else reading this.

In the media query, I targeted the list group items and gave them a width of 33%, padding of 1.5%, and changed display to inline-block like so…

body .gform_wrapper.gravity-theme .gfield_header_item, body .gform_wrapper.gravity-theme .gfield_list_group_item {
        width: 33% !important;
        padding: 1.5%;
        display: inline-block;
}

Those figures are specific to my site’s styling, but easy enough to play around with them to get the right spacing you need

Thanks again @uamv !!

EDIT:
Changed code snippet width from 30% to 33%, and removed margin, but added padding of 1.5%