Issue with Styling of "Country" Selector

Support
#1

Hi Themeco Team,

I am in the process of building a form using Ninja Forms and the “country” selector has some styling issues. I originally thought there was a problem with the form, so I contact Ninja Forms but they said there’s an issue with the theme that’s causing this. I wanted to bring this to your attention and ask if you had a fix to make this selector look like the “state” selector… Can you help?

Thanks!

#2

Hi @bartenderonduty,

Thank you for reachong out to us. You seem to have quite a few licenses registered on your account so I am not sure which website is in question, please share the page URL in question so we can take a closer look. In the mean time please check for the following first:

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

  2. If you’re using a caching plugin, clear all caches including browser cache then deactivate your caching plugin and other optimization plugins.If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  3. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

  4. Remove custom CSS, JavaScript and deactivate your child theme and switch to parent theme (take a complete backup first).

Thanks.

#3

Thank you for the quick reply. Please see below for the page URL.

#4

Hello @bartenderonduty,

I have just checked the form page of your site and the State and Country select fields seem to have some difference that is why they don’t appear the same.

Perhaps there are some differences in the way you had the select fields setup that is why it works correctly for the state field but not for the country field.

Is there a chance that you can provide us with the admin details of the site in a secure note so that we can check it? Please note, however, that since this seems like a setup issue for the Ninja Forms which is a third party plugin, we might not be able to provide the solution if the issue is on the form itself but we’ll have to check first to confirm.

Thank you.

#5

I originally reached out to Ninja Forms to report this issue but they claim there is a conflict with the theme. Regardless, I appreciate you taking the time to look into this.

Below are the admin details.

#6

Hi @bartenderonduty,

Sorry, but I can’t really confirm that this is an issue with the theme because I don’t see any theme styling that overwrites the form styling (all the form styling is coming from Ninja Form CSS). Can you install and test it on a default WP theme (Twenty Nineteen) and see if that resolves the issue, if not then we know its a Forms issue, if it does then we can do further investigation why is this happening. Although the State and Country is the same select input, we can not really compare the two because the Country is some kind of a premade (with options) select input.

For now you can use this custom CSS to fix the styling of the country select input.

.listcountry-wrap .ninja-forms-field.nf-element {
	background: #f7f7f7;
    border: 1px solid #c4c4c4;
    border-radius: 0;
    box-shadow: none;
    color: #787878;
    transition: all .5s;
}

Thanks,

#7

Works great. Thank you for your help with this!

#8

You’re must welcome, Cheers

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.