Высота текстовой области подстраивается под содержимое с использованием только CSS и HTML * - PullRequest
0 голосов
/ 13 июня 2018

Я работаю над очень тяжелым веб-приложением.Мне предложили создать отчет для просмотра введенных данных.По большей части это работает до сих пор, но у меня возникают проблемы с стилизацией textarea s таким образом, чтобы он соответствовал длине контента.На странице отчета также должен быть вид печати на основе CSS.

По сути, страница отчета - это не что иное, как страница формы с добавленным классом CSS для тега form.Намерение состоит в том, чтобы повторно использовать страницы формы с минимальными изменениями, насколько это возможно, чтобы уменьшить двойную стоимость обслуживания.

К сожалению, я не могу полагаться на Javascript , поскольку приложение запускается в очень чувствительной областибизнес, где Javascript часто отключается, и пользователь ничего не может с этим поделать.

Так что используйте это как фрагмент кода, чтобы скопировать в свой ответ (если есть какие-либо ответы без Javascript или изменения тега ):

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #f8f8f8;
  border: 0 none;
  display: table;
  font-family: sans-serif;
  height: auto; /*  this doesn't work */
  margin-bottom: 20px;
  padding: 0;
  resize: none;
  width: 100%;
}
<textarea>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</textarea>
<textarea>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</textarea>

Если у вас есть какая-либо соответствующая ссылка, я также готов принять «невозможно без Javascript» в качестве ответа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...