2

I'm stuck for almost a day now, I need help. I don't understand how chat web apps get around this... There are many posts in forums for this issue: I need my footer (or my header) on this page component to move based on height being less than or equal to a phone height, so it is always ready for the mobile keyboard. For this component (as opposed to a chat window component), I'd rather have (1)the header on screen + (2)the textbox not behind the keyboard than (x3)having the textbox at the bottom of the screen when keyboard is closed (I actually want to keep the keyboard open if autofocus would trigger on mobile) input textbox hidden input textbox hidden & header hidden header hidden

Here are some stackoverflow threads that describe this problem: Short/Sweet 7/20/17 Similar case 3/22/19 These seem to have the answer but are in jquery which I don't yet understand or use input.focus which I don't know where to put it in reactjs

css

.New_Plan_Header {
  position: fixed;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index: 3;
  top:0%;
  width: 100%;
  border: none;
  height: 56px;
  width: 100%;
  background-color: #2fbaff;
  color: rgba(255, 255, 255, 0.644);
  font-family: "Muli", sans-serif;
  font-size: 26px;
  src: url(./UIConainers/Icons/Fonts/Muli-ExtraLight.ttf);
}
.plan-form {
  position: absolute;
  display: flex;
  height: 56px;
  width: 100%;
  bottom: 0%;
  color: #444;
  font-family: "Muli", sans-serif;
  font-size: 26px;
  padding-left: 56px;
  src: url(./UIConainers/Icons/Fonts/Muli-ExtraLight.ttf);
}

js

<div className="New_Plan_Header">Plan</div>
<input
  type="search"
  className="plan-form"
  name="title"
  value={note.title}
  onChange={e => this.updateValue(e)}
  placeholder="Title"
  autoFocus={true}
  autoComplete="off"
  //onfocusin="transform: translateY(-600%), bottom:60%"
  />

Thanks for reading and your help in advance

Go to src/UIConainers/Plans/planpages/plannew.js & plannew.css

Codesandbox

Nick Carducci for Carface Bank
  • 531
  • 5
  • 16

1 Answers1

0

Well after reading your question title I would say try it out with media querys and look if the result is what you want to achieve. If not come back again :O If you want to try out the input.focus thing look up this post how react programmatically focus input maybe this is what you need to understand what you have to do

TheDevGuy Marc
  • 89
  • 11
  • 1
    ok thanks I'll read that but could you save me some time and tell me what script I should use to move footer input up when keyboard enters? – Nick Carducci for Carface Bank Sep 16 '19 at 13:58
  • 1
    öhm well look at the post comment with the green upvote that is the one you probably want to implement and change to your needs. – TheDevGuy Marc Sep 16 '19 at 13:59
  • 1
    I added (1) `onClick={this.focus} ref={this.textInput}` to input, (2) `this.textInput = React.createRef(); this.focus = this.focus.bind(this);` to constructor & (3) `focus() { this.textInput.current.focus(); }` outside render within class! sort of makes sense to me but doesn't ..."work" – Nick Carducci for Carface Bank Sep 16 '19 at 14:18
  • I'm [experimenting with](https://stackoverflow.com/questions/8883163/css-media-query-soft-keyboard-breaks-css-orientation-rules-alternative-solut) `@media screen and (min-aspect-ratio: 13/9) { .plan-form { position: fixed; bottom:60%; } }` – Nick Carducci for Carface Bank Sep 16 '19 at 15:42
  • and now `` but it's not working. getting closer... – Nick Carducci for Carface Bank Sep 16 '19 at 15:55
  • `@media screen and (min-aspect-ratio: 9/13) { .plan-form { position: fixed; bottom:0%; }` . I just switched the media query position with the initial position, so the mid-height render appears on portrait. Still can't `onfocus={window.scrollTo(0,0)}`. I hope this will work as well when there is scrollable content in the chat window component (this component is just a small form) – – Nick Carducci for Carface Bank Sep 16 '19 at 17:18