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 :
Remove the keyboard graphic in the framer file.
Ok. That is fine but then it will not work on desktops. Is there a universal solution?
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
elseproceed as normal
Here's a direct link to the method in Framer's Docs – http://framerjs.com/docs/#utils.isPhone
Awesome! I will try this one out
Vaibhav Kanwal Let us know if it works or not!
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
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?