Css: Remove Scroll Bar And Replace With Variable Height For Textarea In A Table

October 02, 2024 Post a Comment

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: https://jsfiddle.net/to45asgy/1/ Problem I

Solution 1:

It will hide scroll and set size for content text

functionautoheight(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><bodyonload="autoheight('ta')"><table><tbody><tr><th>Column 1</th><th>Column 2</th></tr><tr><td><divclass="container fixed-min"><textareaclass="text-area">Set width in this big column
            </textarea></div></td><td><divclass="container" ><textareaid="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>

Solution 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.

Solution 3:

I always use this library

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

Demo

Solution 4:

Please add row textarea rows and columns and columns to textarea

and add overflow: hidden or auto.

Solution 5:

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.

Learn Html5