Textarea не учитывает отступы, когда пробел установлен на nowrap - PullRequest
Новая
       9

Textarea не учитывает отступы, когда пробел установлен на nowrap

0 голосов
/ 23 октября 2019

Я пытаюсь заставить элемент textarea вести себя так же, как и элемент ввода. Однако у меня возникли проблемы с заполнением. После установки white-space property для текстовой области на nowrap отступ с правой стороны больше не соблюдается.

Вот изображение того, что я имею в виду:

enter image description here

CSS: 

textarea {
  width: 100%;
  resize: none;
  padding: 10px 15px;
  overflow: hidden;
  white-space: nowrap;
}

input {
  width: 100%;
  padding: 10px 15px;
}

Вот ссылка на скрипку: https://jsfiddle.net/b384w0mn/

Есть идеи? Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 23 октября 2019

Вы можете использовать этот код 

body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.container {
  width: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.textarea {
  padding: 10px 15px;
  border: 1px solid #ced4da;
}

.textarea textarea {
  width: 100%;
  resize: none;
  border: none;
  padding: 0;
  outline: none;
  box-shadow: none;
  overflow: hidden;
  white-space: nowrap;
}

.form-group input {
  width: 100%;
  margin: 15px 0 0 0;
  padding: 10px 15px;
  outline: none;
  box-shadow: none;
  border: 1px solid #ced4da;
}
<div class='container'>
  <form>
    <div class="form-group textarea">
      <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Enter some textssssssssssssssssssssssssssssssssss" rows="3"></textarea>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Enter some textssssssssssssssssssssssssssssssssss">
    </div>
  </form>
</div>
1 голос
/ 23 октября 2019

Возможно, контейнер поможет? 


<div class='container'>
  <div class="textarea-wrapper">
  <textarea placeholder='Enter some textssssssssssssssssssssssssssssssssss' rows='1'></textarea>
  </div>

<input type='text' placeholder='Enter some textssssssssssssssssssssssssssssssssss'>
</div>


* {
  box-sizing: border-box;
}


.container {
  width: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.textarea-wrapper {
  padding: 10px 15px;
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
  resize: none;
  overflow: hidden;
  white-space: nowrap;
  border:none;
}

input {
  width: 100%;
  padding: 10px 15px;
}

https://jsfiddle.net/kostasx/cjkq1g86/

...