0

I'm building a web app with React/Redux and Foundation as a styling library.

What is the best way to have a sticky footer ALWAYS appear on the screen, even when the on screen keyboard pops up? As of now, the keyboard covers the footer, but I would like to see the footer right above the keyboard.

The CSS for the footer...

#footer {
 width: 100%;
 background-color: #4c66a4;
 color: #fff;
 position: fixed;
 left: 0px;
 bottom: 0px;
 height: 60px;
 text-align: center;
}
peterchic
  • 407
  • 1
  • 4
  • 11
  • My understanding is that this behavior is also dependent on the browser and OS, where android and iOS treat this differently. did you have a browser / os in mind? – random-forest-cat Dec 27 '17 at 16:22
  • @lfender6445 It will be a prototype so Chrome should be our main browser. Aiming at a larger display based off market research. – peterchic Dec 27 '17 at 16:29
  • Post some code. – Jonny Dec 27 '17 at 16:59
  • If you are targeting desktop, what do you mean by onscreen keyboard? – random-forest-cat Dec 27 '17 at 17:33
  • @lfender6445 it's a web app, so you'll use it on desktop, but you'd be able to pull it up on an iPad just the same. On mobile devices, an On Screen Keyboard slides up from the bottom when input fields are active. The layout will be different and obviously not needed on desktop, but I need to develop for all instances. – peterchic Dec 27 '17 at 20:43
  • @Jonny I will add what I have so far, but it's not producing what I'm asking for. – peterchic Dec 27 '17 at 20:43

0 Answers0