Select dropdown inputs in WooCommerce Checkout form behave strangely

[christianatforpac]

I’m running WooCommerce on a test site.

In the checkout page, I am experiencing two problems with the styling of the Select form attribute. These two problems are evident with both the Country and State fields.

First, the dropdown menu does not descend normally like a long vertical list. Instead it appears deconstructed and spread out. This appears to be a Themeco issue (or design) as when I use the Storefront theme, I notice the select form works as it normally does again. See image: Screenshot 2018-07-19 11.09.50.png

I would like to remove this feature/bug as I do not find it appealing.

Second, I am having trouble vertically aligning the select field. I have managed to adjust the height of the field but the country (e.g. “Canada”) appears at the top rather than being vertically aligned. I believe a workaround is to set the following classes (.select2-container–default .select2-selection–single) with padding-top. However, this is not elegant and it doesn’t impact how the arrow on the right hand side looks.

Am hoping for some clarification on both issues.

[ruenel]

Hello There,

Thanks for writing in!

You are experiencing the issue because it has been affected with your custom css. You added this:

ul{
	list-style-type:none;
	margin:0;
	padding:0;
	color:#FFF;
	letter-spacing:0.15rem;
	font-family:BrandonTextLight;
	font-weight:400! important;
}

li{
	float:left;
	margin-left:20px;
}

Please remove that code. If you are using that code for a page or specific region, please provide the url of the page we can see the application of the code so that we can give you a more tailored code that will not affect other parts of the theme styling.

Please let us know how it goes.