Drop down boxes alignement problem « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

paulbcram
Member

HI - hope someone can help with this. I am new to GF and grappling with editing the HTML. On one particluar line the fields do not line up horizontally. I have changed the format from 4 column layout to 2 column and same error. The problem is specifically on the fields 'home team' and 'away team'.

I have used the code for 4 columns pasted from the forum and this works ok further down the form. There must be something that mis-aligns these fields on the row.
form is here:
http://www.results.nctt.co.uk

Many thanks for any advice!

Posted 13 years ago on Friday September 23, 2011 | Permalink
Kevin Flahaut
Administrator

The problem is that the preceding "division" field is taller/occupies more vertical space than the first two fields. This is causing the following floated elements to "hang" on the elements invisible border. That's one of the problems when you're making extensive use of the CSS Ready Classes or using lots of floated elements.. floats don't work like inline elements so the height of the fields matter.

You can target the first 3 fields by their ID and set a consistent height, or you can try adding an empty HTML block field just after the "division" field that will clear the floated elements.

test screenshot ( with empty HTML block ) : http://bit.ly/pT2z8V

Posted 13 years ago on Friday September 23, 2011 | Permalink
paulbcram
Member

Hi - many thanks for really quick advice - yes I put the empty HTML field in and it aligns correctly. I since changed back to 4 columns for this row which i think looks better.

You mentioned about targeting the first 3 fields by their ID and set constant height. I know how to find their ID , but what code would fix the problem as opposed to inserting HTML box. I wasnt sure of the code for this and it would be helpful for targeting other field. eg I also need to left align the first row and equally space the fields

Many thanks for your great support

Paul

Posted 13 years ago on Friday September 23, 2011 | Permalink
Kevin Flahaut
Administrator
You would target them for CSS manipulation using the ID on the parent list item this way.
```
[css]
/* first field */
body #gform_wrapper_1 .gform_body .gform_fields li#field_1_1.gfield {
	border: 1px solid red
}

/* second field */
body #gform_wrapper_1 .gform_body .gform_fields li#field_1_2.gfield {
	border: 1px solid blue
}

/* third field */
body #gform_wrapper_1 .gform_body .gform_fields li#field_1_34.gfield {
	border: 1px solid green
}
```
screenshot: http://bit.ly/qHMVxY

More targeting samples, etc. can be found in the documentation here if you need.

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
Posted 13 years ago on Friday September 23, 2011 | Permalink