2

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.

enter image description here

Notes:

  1. 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.
  2. 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 :'(

Improve this question
4
  • 1
    You can do it several ways... maybe consider using contenteditable="true" and make a div look like the textaraea? read more Commented Apr 23, 2019 at 12:45
  • I used a <div> solution previously, but am looking for a <textarea> solution IF this is possible. I left a note edit about having tried this. Thank you. Commented Apr 23, 2019 at 13:03
  • 1
    Have you seen Textarea Auto-Height Commented Apr 23, 2019 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. Commented Apr 23, 2019 at 13:11

5 Answers 5

Reset to default
4

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is an interesting solution. Seems easier than refactoring my code to use editable <div>, but does introduce more code to maintain in the longer run. A trade-off to consider. Thank you.
2

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.

Improve this answer

1 Comment

I used to use a <div> rather than <textarea> 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.
1

I always use this library

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

Demo

Improve this answer

Comments

0

Please add row textarea rows and columns and columns to textarea

and add overflow: hidden or auto.

Improve this answer

Comments

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.

Improve this answer

2 Comments

The textarea of Column 2 is variable based on content within the textarea, or as the window is resized to a smaller width.
The table should take care of the width automatically

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.