Hi,
I have a very long form which I need to shorten. I want to have a 2 column layout in the last section which comprise 36 uploads. The CSS I used is:
'ul#input_1_64.gfield_file li {width:50%; margin:0; float:left}'
The form is here
The CSS doesn't seem to make it happen. Any insight is appreciated.
Steve G
Steve,
Your CSS declaration above is a little off. Let's take a different direction anyhow. The best way to proceed is to add a class to the field via the admin. For my test, I added the class "two_columns" to all but the last of the fields.
For the very last field in the series, I added a different class.."two_columns_last". We need this one to clear the float so everything below that lines up correctly.
So, once that's added. You can add this to your theme's style.css file.
.gform_wrapper ul#gform_fields_1 li.two_columns, .gform_wrapper li.two_columns_last {width:48%; height:140px; float:left; border:1px solid #eee; margin:0 10px 14px 0!important}
.gform_wrapper ul#gform_fields_1 li.two_columns_last {clear:right}You can see the result of my test.. screenshot
So, you'll notice a couple of things. The file upload field is different depending on the browser you're using and it may or may not fit the way you hope. If you used the "top label" option for your form, you'd have a better chance of it fitting in the space horizontally. It's something you may want to play around with.
Also, unrelated to the styling, I'm not sure that many file upload fields is going to be a good idea from a performance or usability standpoint. If the validation returns an error, you may have to re-populate all of those fields again before sending. If not, then you're going to try to push all of these files up to the server at one time and may end up with upload errors or timeouts. Just something to think about as well.
Hi Kevin,
As always you hit the ball out of the field! One thing that strikes me is the amount of dead space. Is there any way in this particular section to have the field labels aligned on the top or bottom of the fields? It will make a lot more efficient use of space.
I have to disagree that my css declaration was a "little off". It was way way off! I need to get up to speed on CSS pretty quickly. Would you know of any good online resource(s) I could use?
Spot on with your comments about the large number of uploads. I suggested to my client that zipping them up into one file might be the best way to go but he wouldn't go for it. I'll test it out to see what happens.
Many thanks again for your stellar support.
Best
Steve G
Sure, I tweaked everything a bit here but you can try something like this.
.gform_wrapper ul#gform_fields_1 li.two_columns, .gform_wrapper ul#gform_fields_1 li.two_columns_last {width:45%; height:65px; float:left; border:1px solid #eee; margin:0 10px 14px 0!important; padding:8px}
.gform_wrapper ul#gform_fields_1 li.two_columns_last {clear:right; }
.gform_wrapper ul#gform_fields_1 li.two_columns label, .gform_wrapper ul#gform_fields_1 li.two_columns_last label {float:none; clear:both; margin-bottom:8px!important}A few of good sites for CSS tutorials..
http://w3schools.com/
http://www.csstutorial.net/
http://www.tizag.com/cssT/
A google search will turn up hundreds more I'm sure, but those are a good place to get some good info and examples.
I understand about the client work and wish you the best on that front. It's always a challenge.
My pleasure Steve. Good luck with the CSS tutorials. I'm sure you'll be a pro in no time.
