0

I am working on a very form-heavy web application. I am presented the task to create a report view of the entered data. For the most part it works so far, but I'm having trouble styling the textareas in a way that it adjusts to the content length. There needs to be a CSS-based print view of the report page too.

Basically the report page is nothing more than the form page with an added CSS class on the form tag. The intention is to reuse the form pages with as minimal adjustments as possible to reduce double maintenance cost.

Unfortunately I cannot rely on Javascript as the application is being run in a very sensitive field of business where Javascript is often disabled with nothing the user can do about it.

So use this as a snippet to copy to your answer (if there is any answers not involving Javascript or changing the tag):

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>

If you have any relevant reference I'm also willing to accept "not possible without Javascript" as an answer.

connexo
  • 53,704
  • 14
  • 91
  • 128
  • I guess will endup with "not possible" answer ... possible duplicate of : https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize – Temani Afif Jun 13 '18 at 14:05
  • possible duplicate of : https://stackoverflow.com/questions/47971723/css-flex-div-grow-as-child-textarea-grows-no-jquery/47971864#47971864 [here you can find a light JS version] – Temani Afif Jun 13 '18 at 14:06
  • @TemaniAfif Javascript is not an option in this project. – connexo Jun 13 '18 at 14:08
  • yes I know but actually this is the only solution until a CSS-wizard come up with some magic ;) – Temani Afif Jun 13 '18 at 14:10
  • Is replacing textarea with a div that much more maintenance? Shouldn't be able to edit report data imo – StefanBob Jun 13 '18 at 15:03
  • @StefanBob That would require more than just replacing the tag on the serverside as we are currently using Thymeleaf's `th:field` binding on the textareas (which wouldn't work out of the box if it was a div). – connexo Jun 13 '18 at 15:31

0 Answers0