Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to make a div always be positioned in a single location on the screen?

I have a div with a textarea and a submit button, but I would like this div to be positioned in a single location on the screen regardless of what happens.

enter image description here

As you can see, the textarea is in a single screen placement, but every time I send messages it goes down, like it does here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

I want this textarea of ​​mine to be positioned at the end of the screen, without going down or up because of the messages

HTML

  <div className='messageText'>
    <textarea  
      name="" 
      id="" 
      cols="30" 
      rows="10"  
      placeholder='Digite sua mensagem...'
      value={message}
      onChange={(e) => setMessage(e.target.value)}
     ></textarea>
    <button onClick={handleSendMessage}>Enviar</button>
  </div>

CSS

.messageText {
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
  margin-top: 4vh;
}

.messageText textarea {
 border-radius: 6px;
 border: none;
 outline: none;
 width: 50%;
 height: 10vh;
 background-color: #3d3939;
 color: #fff; 
}

.messageText button {
  height: 10vh;
  width: 10vh;
  background-color: #ff914d;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.1rem;
}

>Solution :

Using position: fixed you can achieve what you want

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 100px;
}

.messageText {
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
}

.messageText textarea {
  border-radius: 6px;
  border: none;
  outline: none;
  height: 10vh;
  background-color: #3d3939;
  color: #fff;
}

.messageText button {
  height: 10vh;
  width: 10vh;
  background-color: #ff914d;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.1rem;
}
<footer>
  <div class="messageText">
    <textarea name="" id="" cols="30" rows="10" placeholder="Digite sua mensagem..."></textarea>
    <button>Enviar</button>
  </div>
</footer>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading