fixed pop up div gets overlapped by Keyboard

Question

I've searched a considerably lot of possible solutions but I can't seem to fix this issue. I have a pop up div with the following characteristics:

It has a 5 seconds delay
It's a form
It will pop up when the user is scrolling down (because of the 5 secs delay)
It has FIXED position in order for it to appear at the center of the screen if the user has scrolled down the screen.

It works perfectly fine on PCs and laptops, the problem I have is with the mobile devices.

When the pop up appears, yes in the middle of the screen, and I click on any of the fields of the form, the keyboard shows up, overlapping the form making it unusable.

I am looking for any of the following solutions: 1. To be able to scroll through this fixed div once the keyboard shows up. 2. To change the fixed position to absolute but making sure that the pop up appears in the middle of the visible screen. (because when its set to absolute it will appear at the top of the page and not where the user is)

EDIT: Thanks for your answers! Ok here is the full HTML and the CSS:

HTML:

<!-- Pop Up -->
      <div id="boxes" class="boxes">
       <div id="dialog" class="window">             
          <form>
             <p><input type="text" placeholder="Your Name" name="name" id="name"></p>
             <p><input type="text" placeholder="Your mail" name="email" id="email"></p>
             <p><textarea rows="10" name="msg" placeholder="Your msg" id="msg"></textarea></p>
             <p style="float:right; ">                
                <input class="btn btn-danger btn-large" type="submit" value="Enviar">
             </p>
          </form>
          <span class="loading"></span> 
       </div>
       <div id="mask"></div>
    </div>

CSS:

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#0c0c0c;
  display:none;
}
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  /*padding:20px;*/
  border-radius: 15px;
  border: ;
  text-align: center;
}
#boxes #dialog {
  /*width:100%;*/
  height:auto;
  padding:10px;
  background-color:#fdfdfd;
  font-family:'Open Sans Condensed', sans-serif;
  font-size: 15pt;
  position: fixed;
  top: 50%;
  left: 551.5px;
  display: none;
  color: black;
  width: 500px;
}    

@media (max-width: 767px) {
  #boxes #dialog {
    width: calc(100% - 60px);
  }
}

Have you written any code in an attempt to do #1 or #2? It would be useful to see what you've tried that hasn't worked. — BSMP, May 17 '15 at 03:07
Please provide HTML and JavaScript, not just CSS, otherwise we can't help you. — Blake, May 17 '15 at 03:07
I dont think there is an easy fix for this. However you could check if mobile using Javascript -- http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery -- and dynamically change the css of the popup to (top: 20%;) depending how big the popup window is — Tasos, May 17 '15 at 03:07

score 1 · Answer 1 · edited May 23 '17 at 11:46

Ok so I've finally worked this around, with this solution posted a year ago: Fixed position div scrollable)

I think this question should be left here anyway because it might be a good solution for all those having problems with the mobile keyboards.

The problem I had was only happening in mobile devices so the solution to have a scrollable fixed div (so it always appear in the center of the visible screen) is:

@media (max-width: 767px) {
  #boxes #dialog {
    width: calc(100% - 60px); /*centers the pop up horizontally*/  
    top: 10px;
    left: 35px !important; /*this is just to fix a small gap, not really necessary*/
    bottom: 10px;    
    overflow-y: auto;
    max-height: 100%;
  }
}

This absolutely fixed the issue. So the pop up now appears always in the center of the visible screen. And when the keyboard pops out the div becomes scrollable.

Thanks all anyway!

fixed pop up div gets overlapped by Keyboard

1 Answers1