Search Modal covered by the keyboard on iOS mobile

Support
#1

Hi Support

How can I fix Search Modal view on iOS mobile?

As you can see in the attached screenshot the search text field is covered by the keyboard.

Thank you

#2

Hi @agenzia.gamma

Seems like you changed from the Modal to the slide in menu.

If you need help with modal menu, please setup modal menu on one of your pages and provide the URL.

Thank you

#3

Hi Joao

I see Modal in my Menu…

Please could you check?

https://agenziagammapraticheauto.it

Thank You

#4

Hello There,

Thanks for sending out the url of your site. To resolve the issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
  .x-modal-content-inner {
    vertical-align: top;
  }

  .x-modal-content-inner .x-modal-content {
    padding-top: 120px;
  }
}

Hope this helps. Please let us know how it goes.

#5

Firstly have to say a great job done on this latest release of Pro, truly a pleasure building sites with this theme!

I placed the above CSS code in the Global CSS, but it doesn’t have any effect. The modal is still positioned in the middle of the screen, placing it behind the keyboard on iOS devices.

The URL of my site is http://www.sapra.co.za/

WP version 4.9.5
Pro version 2.0.4

Any help sorting this out will be much appreciated.

#6

Hi @Glasseye,

I’ve just tested your website and the search modal is working fine on my iPhone 7:

Could you please provide us with your screenshots?

Thank you.

#7

Yes, it seems to be working fine on iPhones, however the positioning is still wrong on iPads:

#8

Hi there,

The reason that you see it that way in iPad is that the suggested code was for the mobile only. In the suggested code there is a Media Query which tells that feature the code only for devices smaller than 767 pixels. Now you can change that by forcing the code to work on bigger devices for example:

@media(max-width: 979px){
  .x-modal-content-inner {
    vertical-align: top;
  }

  .x-modal-content-inner .x-modal-content {
    padding-top: 120px;
  }
}

Please work with 979px and change that to make sure it will work ok on your iPad.
1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g
2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.w3schools.com/css/

Thank you.