Change column field width for list [RESOLVED]

This was asked a while back by someone else, but the response hasn’t worked for me, so I will pose my own particular question.

I have form (ID 3) with a list (ID 32) where the first column will contain a one or two digit number. I want to reduce the width of the column to give the other columns more room.

I went to the documentation at https://docs.gravityforms.com/list-field/#columns and found, it seemed, what I was looking for. According to that, my code should look something like:

body .gform_wrapper_3 .gform_body .gform_fields .gfield .ginput_list table.gfield_list colgroup col.gfield_list_32_col1 {width: xxxx}

(Note: I also tried “…list_32_col_1…” thinking that the other examples targeting odd and even columns had an underscore, but it made no difference.)

However, adding this code to my theme’s CSS Customizer has no effect. If I add it to my theme’s Function.php file, I get an error (“syntax error, unexpected ‘table’ (T_STRING)”).

This was AFTER figuring out that the “#” symbol in the documentation was, in fact, a typo and supposed to be a period.

Anyway, would someone be able to steer me straight?

If you are targeting a field by ID, the CSS class name would be prefixed with a hash (#). If it’s an element class (less specific, not usually with a numeric ID) it would be prefixed with a period (.)

This is correct for an ID:

#field_XX_X

In your example, when targeting the form wrapper by ID, it should be a hash, not a period. This is incorrect: .gform_wrapper_3. It should be this #gform_wrapper_3

However, this is CSS code, not PHP, so in goes in the theme style.css or the Appearance Customizer (Appearance > Customize > Additional CSS). It does not go into the theme functions.php

Thank you for your reply, but I have been unable to resolve this issue even with this bit of guidance.

As per your point about targeting a field by ID, I replaced the period with the hash symbol in both places:

body #gform_wrapper_3 .gform_body .gform_fields .gfield .ginput_list table.gfield_list colgroup col#gfield_list_32_col1 {border: 1px solid red}

,which is how it was when I first wrote it. It didn’t work then (or now), which is why I began to think it may have been a typo. Anyway…still not working.

Your comment about “#field_XX_X” being correct for an ID is a bit cryptic to me since it doesn’t apply 100% to my example. I assume you are referring to the “col#gfield…” part of the above code, but don’t understand what you are trying to imply. However, assuming you were trying tell me something about how that part may have been structured incorrectly, I tried variations on “#gfield_list_1_col1” (since it is the first list in that form), “#gfield_1_1”, “#gfield_list_32_1”, and “#gfield_list_32_col_1”, etc. No difference.

(The instructions on the help page that I linked didn’t make it clear if the list # was the ID of the list field or the Nth occurrence of a field list in my form. In my case, it is the first list field in the form, with an ID of 32). I think I have tried every variation to no avail.

Finally, as for the fact it is CSS code and therefore doesn’t belong in Functions.php, all I can say is DOH! In any event, it makes no difference: putting it in either place doesn’t change anything.

Can you share the a URL to the page on your site where we can see the form, and let us know which columns of which field you want to adjust?

https://spacsociety.com/spring-show-2/gift-shop-submission-form/

The list table in question is on page 3.

Nick

Thank you for the link. Adding this CSS to the Appearance Customizer (Appearance > Customize > Additional CSS) took care of it for me:

body .gform_wrapper table.gfield_list tr td.gfield_list_32_cell1 {
	width: 40px!important;
}

Screenshot of that being applied to your form:

Thank you!

That said, why does this differ so substantially from the documented code?

There are always many ways to do it. I picked one I’m familiar with that happened to work on your site. :slight_smile: