[Nick S]

Good day. I am using the Excerpt Plus template and the Form extension. For the Biography and Notes field, I am getting reports from my 100+ user based that when trying to submit their profile, only about one-third of them were able to enter text in those fields. Everyone who was using an iPad had the issue. Some people on Macbooks and PCs had the issue.

I tried it on my Widows laptop, my Android tablet, and my Android phone and it worked fine. But so many users using so many different devices, with iPads sticking out the most, were unable to interact with the Biography and Notes fields. I am also using the TinyMCE Advanced plugin…I’m not sure if that makes a difference in this matter.

I know this is a broad topic as no website will work 100% correctly on all computers, tablets, and phones. But I wanted to reach out and see if you have heard of this issue before with the Biography and Notes field and the TinyMCE Advanced plugin and had any suggestions or advice on how to make this work?

[Nick S]

I think I narrowed down the issue to styling. Here are some screen shots showing a huge stretch between the field label (I renamed the Biography label to Hobbies and Other Interests) and the Visual/Text fields. This makes it look like there are two text fields to the end user even though there is just one. Do you know what may cause this large stretch? My users are experiencing this on Macbook Laptops using Safari, iPads, and iPhones. Attached are images. Any help will be much appreciated. Thank you.

Attachments:

You must be logged in to view attached files.

[Nick S]

Another screenshot of Safari on a Macbook laptop.

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Nick S

Best guess this is being caused by the theme loading Safari specific CSS for textareas. You’ll need to share the link to the page with me inn order for me to offer a solution.

[Nick S]

This reply has been marked as private.

[Steven Zahm]

@ NicK

Definitely a Safari “thing” caused by the theme… please try adding the following CSS to the theme’s custom CSS area:

#cn-form table, 
#cn-form tbody, 
#cn-form tfoot, 
#cn-form thead, 
#cn-form tr, 
#cn-form th, 
#cn-form td {
    vertical-align: top !important;
}

That should fix it.

[Author]

Posts