[1.14.10.1] Select dropdown items have text centered in mobile view

Hi @eugene212,

I checked this on a test install but was unable to replicate the issue. On further checking, I was able to notice the following CSS from the theme.css file is causing the issue:

body {
    text-align: center;
    overflow-x: hidden;
}

The text-align is not forced at the Forminator end, it is inherited from the parent class. Please check your theme settings, I hope you can fix this at your end.

Kind Regards,
Nebu John

Hi @wpmudevsupport14,

Maybe the theme setting can fix the issue, but what I was pointing out is the different behaviour of Forminator versions.

Both example screenshots were taken from exactly the same test site environment just using two different Forminator versions – the different behaviour is there, so there is something different about Forminator itself (otherwise I would not raise the issue).

Please also note that the issue is prominent only when observing on a small width screen (like mobile) – on a desktop screen the text is left aligned.

Regards,
Eugene

Hi @eugene212,

We’re constantly working on improving the plugin and also adjusting the CSS so it’s compatible with most of the sites out there and to follow the theme styling when possible, unfortunately, we can’t testing with everything available out there to ensure that there will be no changes.

You can go to Appearance > Customize or use your theme/page builder custom CSS field to add below CSS code that should resolve the issue for all forms on that site:

.forminator-ui div[id^="select-"] {
	text-align: left;
}

Cheers,
Predrag

Hi @wpmudev-support1,

Unfortunately suggested CSS workaround does not change the behaviour.

Regards

Hi @eugene212

Can you try to flush the caching?

https://monosnap.com/file/zjQleTUhuwlkdN7GJCANW5uNrbKLXA

Or can you try to use an incognito mode to verify if the issue returns only for logged-in users?

Let us know the result you got.
Best Regards
Patrick Freitas

Hi @wpmudevsupport12,

I have tried both suggestions to no avail with 1.14.10.1 – when I simply roll back Forminator to 1.14.7 (no any other changes), the issue is gone.

Your screenshot was probably taken with version 1.14.7 (therefore not showing the issue) – I have set it again to 1.14.10.1 at the test site, so you can investigate further.

P.S. I was keeping Forminator at 1.14.7 to run some other tests since 1.14.10.1 is having another issue (I believe already raised in other topic) with Checkbox changed structure and data populating, see excerpts from serialized “entries” for the identical submitted forms:

[1.14.7]
s:10:”checkbox-3″;a:2:{s:2:”id”;s:4:”1265″;s:5:”value”;a:1:{i:0;s:11:”УЗИ-ЩЖ”;}}

[1.14.10.1]
s:10:”checkbox-3″;a:2:{s:2:”id”;s:4:”1255″;s:5:”value”;s:33:”Щитовидная железа”;}

Regards,
Eugene

• This reply was modified 3 years, 7 months ago by eugene212.

Hi @wpmudevsupport12,

Here is the latest snapshot using Android phone:

Android-1.14.10.1

Regards

Hi @eugene212,

Can you please check if the following CSS helps with resolving the issue?

.select2-results__options li {
    text-align: left;
}

Best Regards,
Nebu John

Hi @wpmudevsupport14,

Yes, your suggested CSS seems to fix the issue as a workaround, thank you.

But the question of changed Forminator behaviour is still open – workaround is good for those in the know, but it’s like a patch on top of Forminator itself and other users may keep hitting this issue inadvertently.

Regards,
Eugene

Hi @eugene212

I checked this issue and it is happening due to a custom CSS from the page builder:

https://monosnap.com/file/PqVNBbzxbbhqSu5VbAoiYcP6ALplQs

body{
    text-align: center;
}

I was able to replicate the problem on my website, it happens because we don’t see any text-align to the field so it will inherit the body CSS.

I checked the plugin downgrading the version and could replicate it on different versions, so it is not new behaviour.

We will let our developers know so we can review it, but I suggest not using the text-align: center; on body element instead of it define this in the specific classes and IDs.

Let us know if you have any further question on this.
Best Regards
Patrick Freitas

Hi @wpmudevsupport12,

I was trying to point out the difference in Forminator behaviour compared to version 1.14.7 since I was caught with it when attempting to switch to the latest Forminator version.

Since Forminator developers are aware about it (and there is a workaround via CSS as suggested by @wpmudevsupport14), let’s close the topic.

P.S. I am still using 1.14.7 in my live WP site because of the other issues with the latest Forminator version, but always looking forward to be able to upgrade to the latest version.