Radio field unable to show the radio icon in mobile phone

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user is having the radio buttons icons hidden in the left when viewing the website in mobile.

Solution:
It seems to be a compatibility conflict with some styles on the website. The following CSS code fixes them:

.wpv-custom-search-filter__input>.radio {
    padding-left: 20px;
}

This support ticket is created 4 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

Tagged: Custom search, Views plugin, WordPress Archives

This topic contains 3 replies, has 2 voices.

Last updated by WeiS2074 4 years, 6 months ago.

Assisted by: Jamal.

Author

Posts

June 12, 2020 at 12:23 pm #1660075

WeiS2074

Hi,

I create a custom radio field, then place it in a custom type archive, no matter I place it in a single column, 2 column grid or 3 column grid, it doesn't show on the icon on Chrome on my iPhone 7. Even if I rotate my screen, it still the same.

June 13, 2020 at 10:03 am #1661107

Jamal

Hello and thank you for contacting the Toolset support.

I actually do not own an iPhone 7 to test with, but I can try with the browser simulator or ask a team member who may own it, but I'll need to know which page to check and I might also need to access your admin area and check how the view is being built. If you would agree, your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

June 13, 2020 at 5:08 pm #1661425

Jamal

I confirm that the issue appears also on the browser simulator and in WordPress customizer when we choose the mobile view. And I suspect that it is caused by another component of your site(theme, or plugin) because I run a local test with only the 2020 theme and Toolset Types and Blocks, the issue was not reproduced.

As a workaround, I added the following CSS code to the WordPress customizer and it seems to resolve the issue, you may need to update it a bit:

.wpv-custom-search-filter__input>.radio {
    padding-left: 20px;
}

I hope this is a viable solution for you. Let me know your feedback.

June 14, 2020 at 12:13 am #1661715

WeiS2074

My issue is resolved now. Thank you!