html - 文本区域内的按钮与文本重叠

Question

我在这里遇到一个问题，文本与表情符号按钮重叠。 基本上我希望文本在到达表情符号之前停止。 我尝试了这个，但令人惊讶的是它对我不起作用 http://jsfiddle.net/36bw0nmo/14/

谢谢

这是我的 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>

Answer 1

希望这就是你想要的

.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>

运行代码片段并查看结果。