Button inside the textarea overlaps text

Question

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>

your snippet works fine, the fiddle you provided has different code, please update the question — dippas, Nov 04 '20 at 22:24
@dippas Look at the last line, here https://jsfiddle.net/w0s4y5nk/14/ just make sure the console is minimized — BitcoinKing, Nov 04 '20 at 22:31

Ramin eghbalian · Accepted Answer · 2020-11-06T15:36:09.800

0

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.

edited Nov 06 '20 at 15:36

answered Nov 04 '20 at 23:06

Ramin eghbalian

2,348
1
16
36

Yes!, but everyone knows we cheated as after the third line is inserted the scroll shows up between the emoji and the textarea. Other than that 99% perfect. – BitcoinKing Nov 04 '20 at 23:43
1

@BitcoinKing now try it, I hid the scrollbar – Ramin eghbalian Nov 05 '20 at 14:40
Perfect, Thanks! Now it seems that the emoji button is fixed and I would like it to be more at the bottom like in the original post. Any idea? @Ramin eghbalian – BitcoinKing Nov 06 '20 at 14:53
@BitcoinKing okay, I'll move it to bottom – Ramin eghbalian Nov 06 '20 at 15:37
You have exceeded my expectation! Thank You. – BitcoinKing Nov 09 '20 at 16:58

Button inside the textarea overlaps text

1 Answers1