Height of drop down field smaller than other fields

Get Help
,
1

I’ve created a form using Conditional logic for some fields to displaying 4 on a line with the gf_xxx_quarter Custom CSS feature. When I have some drop down fields, they are not the same height as say a text field. That makes the line look strange.

Is there a way to correct this?

2

Can you share a link to the page on your site where we can see the field in question? Thank you

3

Chris,

Thanks again for your quick responses. Here’s a link to the form in question.

https://www.saccitytech.com/newmain/dance-photo-june-2019/

You will find the example on the final (3rd page) so you will need to input some test entries into the fields.

Here’s a screenshot showing what I described. The Dropdown boxes are skinnier.

Screen Shot 2019-04-22 at 4.11.52 PM.png1878×898 39.1 KB

4

I’ve run into this before. I’m not sure why it happens, though I think it’s the browser that’s doing this, but I just added some CSS to adjust the padding on those inputs and it was good. Do check it on a bunch of OS/browser combinations in case you need to make the CSS browser dependent.

5

I’ll check it out some other browsers, I’d hope it was consistent on the popular ones. I’m not a CSS person, so not sure what / where to put it. Care to share you trick if it’s not too much code?

Thanks!

Steve

6

Try:

body .gform_wrapper .gform_body .gform_fields .gfield select { 
    padding: 6px 0 5px 3px; 
}

Either put it in your child theme’s stylesheet or if your theme has a place for CSS edits you can put it there.

I use Windows/Chrome and also checked Firefox. Both have this issue.

P.S. This would apply it to all dropdown select fields on your site. If you have some that don’t need this CSS then you’d need to be more specific to the page or those particular fields.

7

Here’s the CSS I use to get my select fields looking something like this (see the country field). You could adjust values to match your stylesheet.

select-country-styling
select-country-styling2158×488 22.1 KB 

.gform_wrapper select {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	box-shadow: inset 0px 0px 0px 1px #CCCCCC;
	margin: 0;
	padding: .6em 1.4em .5em .8em !important;
	border-radius: 0;
	line-height: 1.3;
	font-size: 16px !important;
 	font-family: sans-serif;
 	font-weight: 700;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23515253%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #e7e7e7 0%, #e7e7e7 100%);
	-moz-appearance: none;
 	-webkit-appearance: none;
 	background-repeat: no-repeat, repeat;
 	background-position: right .7em top 50%, 0 0;
 	background-size: .65em auto, 100%;
 	transition: all ease .5s;
}
.gform_wrapper select::-ms-expand {
	display: none;
}
.gform_wrapper select:focus {
	box-shadow: inset 0px 0px 0px 3px #515253;
	color: #222;
	outline: none;
	transition: all ease .5s;
}
.gform_wrapper select option {
	font-weight: normal;
}
1 Like