CODEWITHSUNDEEP
htmlcssmarginmargin-left
BitcoinKing
BitcoinKing

Reputation: 1065

Button inside the textarea overlaps text

I am having an issue here where the text overlaps the Emoji button . Basically I want the text to stop before reaching the emoji. I tried this which surprisingly did not work for me http://jsfiddle.net/36bw0nmo/14/

Thank you

This is my fiddle https://jsfiddle.net/w0s4y5nk/14/

textarea#sendMessage {
    height:50px;
    width: calc(100vw - 15px);
    position: absolute;
    bottom: 16px;
    resize: none;
    border: none;
    font-size: 13px;
    padding: 5px 5px 5px 10px;
    border: solid 5px
}

#myButton {
      position: absolute;
      bottom: 10px;
      right: 5px;      
      margin-left: 60px;

    }
    
    
  <textarea id="sendMessage"> </textarea>
  <p id="myButton" role="img" onclick='$("#picker").toggle()'>&#x1F642</p>
  <emoji-picker id="picker"> </emoji-picker>

Upvotes: 3

Views: 498

Answers (1)

Ramin eghbalian
Ramin eghbalian

Reputation: 2667

I hope this is what you want

.textarea-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 50px;
  max-width: 96%;
  width: 96%;
  margin: 0 auto;
  position: absolute;
  box-sizing: content-box;
  bottom: 16px;
  padding: 6px;
  border: solid 1px #ccc;
  border-radius: 4px;
}

textarea#sendMessage {
    max-width: 100%;
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    font-size: 13px;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

textarea#sendMessage::-webkit-scrollbar { 
    display: none;
}

textarea:focus {
    outline: none !important;
}

#myButton {
  width: 24px;
  height: 24px;
  display: inline;
  cursor: pointer;
  padding-left: 4px;
  margin: 0;
}
<div class="textarea-container">
  <textarea id="sendMessage"> </textarea>
  <p id="myButton" role="img" onclick='$("#picker").toggle()'>&#x1F642</p>
  <emoji-picker id="picker"> </emoji-picker>
</div>

run snippet code and see the result.

Upvotes: 0

Related Questions