Hi,
I created a form with ID_4 and a list with ID_27.
The list has 8 columns, and for all columns I want to set a custom width.
I followed this thread
https://community.gravityforms.com/t/change-column-field-width-for-list-resolved/3725/5
and
https://community.gravityforms.com/t/how-to-set-col-width-in-a-field-list/482
Both pieces of suggested CSS do not seem to change anything on my site.
Unfortunately its an intranet site, so I can’t post a link to it.
So I started fiddling around (since my CSS knowledge is very limited) and came up with:
body #gform_wrapper_4 .gform_body .gform_fields .gfield_list_27_cell1 {
width: 8%;
}
This seems to work, and I can add additional lines for the other 7 rows, however…
The labels (column headers) are not aligned accordingly, making my list look like a mess.
Can someone point me in the right direction? Would be very much appreciated!
Without being able to view the site, my suggestion would be to take the same CSS you have applied to your columns and apply them to the labels. Except you would not want to use width. You would want to set them to position relative, and also modify the margin-left percentage. Here’s an example:
/* Of course change the class from .label to the actual class of the label*/
.label {
position: relative;
margin-left: -20%;
}
If margin-left doesn’t work, you can try left: -20%.
If -20% doesn’t work, you can try left: -20px;
If none of this works, you should check to make sure the class is correct and also try adding !important;. For example: left: -20% !important; or left: -20px !important;
Hope this helps.
PS, you owe me at least 20.00. You don’t have to leave a tip or anything but you should pay the 20.00. LOL.
The tip only applies if I also have to tell you; you will more than likely need to use media queries with this type of configuration when you start working on responsive design for smaller devices.
It is tough to figure this out with the url. You could also try instead of position relative and margin left changing the width of the label to match that of the column. With CSS you kind of have to follow the CSS gravity forms uses to make things work. Just an idea in case.
