CSS: Remove scroll bar and replace with variable height for textarea in a table

Question

Currently

I have a table row that contains a textarea for user input. The purpose of textarea is so user can input multiple lines.

Code:

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
}

th, td {
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

.container {
  border: 1px solid blue;
}

.text-area {
  width: 100%;
  box-sizing: border-box;
  display: flex;
}

.fixed-min {
  min-width: 600px;
}

<!DOCTYPE html>
<html>
<body>
 <table>
  <tbody>
   <tr>
    <th>Column 1</th>
    <th>Column 2</th>
   </tr>
   <tr>
    <td>
          <div class="container fixed-min">
            <textarea class="text-area">Set width in this big column
            </textarea> 
          </div>
        </td>
    <td>
          <div class="container">
            <textarea class="text-area">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
            </textarea>
          </div>
        </td>
   </tr>
  </tbody>
 </table>
</body>
</html>

https://jsfiddle.net/to45asgy/1/

Problem

I would like the textarea to show all content by auto-adjusting height rather than requiring the user to scroll.

Notes:

I saw a solution on Creating a textarea with auto-resize, but there has to be a simpler solution through CSS that I am missing.
I used to use an editable rather than before, but because I am using this html within a react component, there were other complications with using an editable so I switched to a . I wanted to know if there is a solution, but appreciate it if there is not, and will then refactor the code to use once more.

EDIT: Seems there is no CSS only solution for :'(

You can do it several ways... maybe consider using `contenteditable="true"` and make a div look like the textaraea? [read more](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content) — skobaljic, Apr 23 '19 at 12:45
I used a
solution previously, but am looking for a solution IF this is possible. I left a note edit about having tried this. Thank you. — Wronski, Apr 23 '19 at 13:03
Have you seen [Textarea Auto-Height](https://stackoverflow.com/questions/17772260/textarea-auto-height/19441316) — Maytha8, Apr 23 '19 at 13:09
Seems like the JS answer on that link answers this question. Same as one of the answers below. And it seems like there is no CSS only solution. That's what I needed to know. Thank you. — Wronski, Apr 23 '19 at 13:11

Charu Maheshwari · Answer 1 · 2019-04-23T13:26:53.527

You can make it a div and apply "contenteditable" = true. Updated fiddle at : "https://jsfiddle.net/hbnr2yk6/"

Relevant changes required are:

<div class="text-area" contenteditable="true">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
            </div>

.text-area {
  width: 100%;
  box-sizing: border-box;
  display: flex;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);
}

**************************** javascript solution ***********

Possible solution to fix the problem with textarea would be to use javascript. I have updated the fiddle at "https://jsfiddle.net/uqr98jf4/". In table column 1 there is textrea solution and table column 2 there is div solution. See if any one of it solves your problem.

I used to use a
rather than before, but because I am using this html within a react component, there are other complications with using an editable <div> so I switched to a <textarea>. I wanted to know if there is a <textarea> solution, but appreciate it if there is not, and need to refactor all the code to use <div> once more.</div>

score 2 · Accepted Answer · answered Apr 23 '19 at 12:58

It will hide scroll and set size for content text

function autoheight(element) {
var el = document.getElementById(element);
    el.style.height = "5px";
    el.style.height = (el.scrollHeight)+"px";
}

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
}

th, td {
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

.container {
  border: 1px solid blue;
}

.text-area {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  overflow:hidden;
  min-height:100%;
}

.fixed-min {
  min-width: 600px;
}

<!DOCTYPE html>
<html>
<body onload="autoheight('ta')">
 <table>
  <tbody>
   <tr>
    <th>Column 1</th>
    <th>Column 2</th>
   </tr>
   <tr>
    <td>
          <div class="container fixed-min">
            <textarea class="text-area">Set width in this big column
            </textarea> 
          </div>
        </td>
    <td>
          <div class="container" >
            <textarea id="ta" onkeyup="autoheight('ta')"  class="text-area">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
            </textarea>
          </div>
        </td>
   </tr>
  </tbody>
 </table>
</body>
</html>

This is an interesting solution. Seems easier than refactoring my code to use editable
, but does introduce more code to maintain in the longer run. A trade-off to consider. Thank you. — Wronski, Apr 23 '19 at 13:09

score 0 · Answer 3 · answered Apr 23 '19 at 12:48

0

I always use this library

autosize(document.querySelector('textarea'));

Demo

answered Apr 23 '19 at 12:48

Michael George

238
1
12

Billy Coda · Answer 4 · 2019-04-23T13:10:51.593

0

To remove the scrollbar you can use overflow: auto; or overflow: hidden;.

https://www.w3schools.com/cssref/pr_pos_overflow.asp

overflow: auto; will automatically create a scrollbar if the text area becomes too overloaded with text.

CSS isn't going to be able to read the content within the textarea tag to dynamically resize the textarea tag.

edited Apr 23 '19 at 13:10

answered Apr 23 '19 at 12:48

Billy Coda

1
3

The textarea of Column 2 is variable based on content within the textarea, or as the window is resized to a smaller width. – Wronski Apr 23 '19 at 12:54
The table should take care of the width automatically – Billy Coda Apr 23 '19 at 13:11

score 0 · Answer 5 · answered Apr 23 '19 at 12:48

0

Please add row textarea rows and columns and columns to textarea

and add overflow: hidden or auto.

answered Apr 23 '19 at 12:48

Zahid Karim

1,556
3
12
14

CSS: Remove scroll bar and replace with variable height for textarea in a table

5 Answers5

Linked