[Resolved] Issues with Search on mobile

[Alex]

I’m having a couple of issues with the search bar on mobile. The search bar changes from a rectangle to a rounded rectangle for a split second as each character is typed. This can be seen (at least on iOS 10 Safari) on the GP demo site.

The other issue is a little more serious and probably something I’ve broken. When browsing one of my sites on an Android device, attempting to type in the search box causes the Android keyboard to close immediately. I’ve tried clearing the custom styles and functions.php from the GP Child Theme, but to no avail. The site is available at https://almostlive.co.uk, if you wouldn’t mind taking a look.

Thanks 🙂

[Tom]

Hi there,

1. Can you give this CSS a try?:

.navigation-search input {
    border-radius: 0;
}

2. Thanks for pointing out this bug! I have it fixed for the next version.

You can see the changes here: https://github.com/tomusborne/GeneratePress/commit/732f75ee3992cbc932aa962b1a115e58fa6161c2

And grab the new file here: https://github.com/tomusborne/GeneratePress/blob/master/js/move-navigation.min.js

[Alex]

Thanks for getting back to me so quickly.

No luck with that CSS, unfortunately. The search box will remain rectangular until a character is entered, then it’ll go back to fully rounded corners each time a key is pressed. A workaround I’ve found for now is to set the border-radius to 30px, which results in a rounded search box. Changing the border-radius to smaller values will have that be the “default” shape, so having this be a fully rounded rectangle will disguise the issue.

The new js files work like a charm, thank you!

[Tom]

Give this a shot:

.navigation-search input {
    -webkit-appearance: none;
     border-radius: 0;
}

[Alex]

That’s fixed it, thanks Tom!

[Tom]

Perfect, just added this to the next update as well 🙂

Thanks!

[Author]

Posts