CODEWITHSUNDEEP
reactjsreact-hookskeyboard-eventscustom-keyboardjs-scrollintoview
Monika Singal
Monika Singal

Reputation: 1

bottom container needs to come above keyboard when we click on any input field in react js

Here is my bottom container now I want that whenever the user clicks on an input field this container goes above the keyboard. I have the user scrollIntoView to do this but it shifted the entire page upwards. I want that only the container goes above the keyboard. I want to do this on website.

import React, {useRef} from 'react'
    
    function App() {
      const ref = useRef(false);
      return (
        <div style = {{position: 'fixed', left: '0px', bottom:'0px', backgroundColor: 'red', overflow:'auto', height:'50%'}} >
            <div>
           <div> Enter your name</div>
            <input
            type ='text'
            onChange ={()=>
              ref?.current?.scrollIntoView()
              
            
            }
            />
            <div style ={{position: 'fixed', left: '0px', bottom:'0px' , backgroundColor: 'green', height:'5%'}} ref={ref} >
              our Bottom container
              </div>
              
              </div>
        </div>
      );
    }
    
    export default App;

Upvotes: 0

Views: 80

Answers (0)

Related Questions