Блог

Главная - Вопросы по программированию - Кнопка внутри текстовой области перекрывает текст

Кнопка внутри текстовой области перекрывает текст

#html #css #margin #margin-left

#HTML #css #поля #поле -слева

Вопрос:

У меня возникла проблема, когда текст перекрывает кнопку Emoji. По сути, я хочу, чтобы текст останавливался до того, как достигнет смайлика. Я попробовал это, что на удивление не сработало для меня http://jsfiddle.net/36bw0nmo/14 /

Спасибо

Это моя скрипка 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()'>amp;#x1F642</p>
  <emoji-picker id="picker"> </emoji-picker>

Комментарии:

1. ваш фрагмент работает нормально, предоставленная вами скрипка имеет другой код, пожалуйста, обновите вопрос

2. @dippas Посмотрите на последнюю строку, здесь jsfiddle.net/w0s4y5nk/14 просто убедитесь, что консоль свернута

Ответ №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()'>amp;#x1F642</p>
  <emoji-picker id="picker"> </emoji-picker>
</div>

запустите фрагмент кода и посмотрите результат.

Комментарии:

1. Да !, но все знают, что мы обманули, так как после вставки третьей строки появляется прокрутка между эмодзи и текстовой областью. В остальном 99% идеально.

2. @BitcoinKing теперь попробуйте, я спрятал полосу прокрутки

3. Отлично, спасибо! Теперь кажется, что кнопка emoji исправлена, и я бы хотел, чтобы она была больше внизу, как в исходном сообщении. Есть идеи? @Рамин Эгбалян

4. @BitcoinKing хорошо, я переместу его вниз

5. Вы превзошли мои ожидания! Спасибо.