I've been struggling for nearly a whole day and could really use some assistance. I'm having trouble understanding how chat web apps manage to work around this particular issue. There have been numerous forum posts discussing the problem: I am trying to ensure that the footer or header on my page component adjusts its position based on the height of the device screen, so it is always prepared for the mobile keyboard. For this specific component (not a chat window), I would prefer to keep (1)the header visible on screen + (2)the textbox not hidden behind the keyboard, rather than (3)having the textbox at the bottom of the screen when the keyboard is closed (ideally, I want to keep the keyboard open if autofocus triggers on mobile). You can view an example of the hidden input textbox here & hidden header here
If you're interested in learning more about this issue, check out these stackoverflow threads: Short/Sweet 7/20/17 Similar case 3/22/19 These resources may provide solutions, but they are often in jquery or involve using input.focus in reactjs, which I am still wrapping my head around.
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);
}
JavaScript:
<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%"
/>
Thank you for taking the time to read this and for any help you can offer in advance.
For further insights, navigate to src/UIConainers/Plans/planpages/plannew.js & plannew.css