This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Vaibhav Kanwal
Posted Feb 06 - Read on Facebook

Hi Guys, I have a question about having 2 keyboards popping up in the browser on mobile.

Is there a way to only have one keyboard on mobile browsers. This seems to be the issue for my own code and also one of the example on framer website.

Refer Example :

8 Comments

Vaibhav Kanwal

Screenshot

Joey Lamelas

Remove the keyboard graphic in the framer file.

Vaibhav Kanwal

Ok. That is fine but then it will not work on desktops. Is there a universal solution?

Joshua Tucker

Hey Vaibhav Kanwal! Framer has really powerful utilities that might be helpful for you.

In your case, you can have an if statement that says:

if Utils.isPhone()
hide the keyboard layer

else
proceed as normal

Here's a direct link to the method in Framer's Docs – http://framerjs.com/docs/#utils.isPhone

Vaibhav Kanwal

Awesome! I will try this one out

Joshua Tucker

Vaibhav Kanwal Let us know if it works or not!

Vaibhav Kanwal

Joshua Yes. That worked for me. Thanks! I have some other residual issue which is unrelated that is the browser seems to push the entire frame upwards as I begin typing which is a default behaviour but this messes up all my positions in framer. Just trying to think of framer may not be the best approach to "test" on the device itself but just prototype on the desktop

Joshua Tucker

When it comes mobile testing, it's important to look at it from every step. Sometimes you have to make layer decisions to ensure it works properly. If I intend to test on mobile, I design it towards mobile, even if it makes it harder to work on desktop because I'll use Mirror with Framer Studio to test on my mobile device.

In your case, it looks like your entire background is one layer. If you separate out your status bar and elements, then you should be able to avoid this by tweaking what happens when the keyboard appears and how the layers move. Does that make sense?

Read the entire post on Facebook