CODEWITHSUNDEEP
htmlcsstextarea
Sunnyside Productions
Sunnyside Productions

Reputation: 775

textarea resizes width but not height, why?

Here's what I've tried:

<textarea name='text' spellcheck = "true" style="height: 4em; width: 80%;" id="wider"></textarea>

I've also tried setting height with px or with %, both of which don't work. I also tried the following in my css file (as well as setting height as %, px, or em in the css, which also didn't work):

#wider{
    width: 80%;
    height: auto;
}

I can adjust the width either with the inline style command or with the css no problem. Why should the height be different, and what else might I try?

Thanks for any suggestions.

update: I have also tried setting the rows property in both the in-line and the CSS style. I understand that inline will overrule CSS. I just want one to work. Right now width attribute is always adjusted to reflect my change, but the height always stays the same. Is there something else I should be looking at? Thanks again!

Upvotes: 4

Views: 12041

Answers (5)

Bobby
Bobby

Reputation: 145

Disclaimer: I can only offer a guess as to why this works, but it works in my wordpress ... I pulled my hair out trying to get the textarea to respond to the css "height: auto" adjustment. By accident, while trying to put in an "oninput=" javascript suggestion from "Moussawi7" [see question https://stackoverflow.com/questions/17772260/textarea-auto-height] which I couldn't get to work, I added a js listener tied to a <textarea id="auto-open"[id name not important]> to wait for the DOM to load.

Long story short, with the DOM Listener keyed to an id for a textarea, apparantly the browser waits for the DOM to finish loading before the browser finishes setting all the attributes for the text area (this is my 100% guesswork). But presto! suddenly the textarea sized itself to the content withOUT a css "height: " setting at all. This is just what I wanted.

Here was that first js code, css, and html

js 
function auto_grow() {
  var element = document.getElementById('auto-grow');
// note: function does NOTHING!!!
console.log("inside auto_grow") // msg shows in cons after page loads
}
document.addEventListener('DOMContentLoaded', function () {
  auto_grow(); 
});

css
.gw-input-content {
  resize: none;
  width: 100%;
  box-sizing:border-box;
  margin-top: .5rem;
  white-space: pre-line; /* removes 1st line text indent in firefox */
  text-wrap: pretty;  /* removes 1st line text indent in chrome */
  overflow: hidden;
}

html
<textarea id="auto-grow" 
class="gw-input-content">
  <?php echo esc_textarea(wp_strip_all_tags(get_the_content()));

?>

Credit where credit is due, chatGPT3.5 then suggested I add another listener inside the DOM listener for textarea input and add Moussawi7's suggestion for expanding the height with a js style.height setting when the user types text which wraps to a new line or hits enter to add a new line. (I had asked chat to help me get Moussawi7's function working in my page.) No changes to the above css or html were needed. Now the textarea expands one line at a time as the user's typing adds new lines.

function auto_grow() {
  var element = document.getElementById('auto-grow');
  element.style.height = "5px";  // Initial height
  element.style.height = (element.scrollHeight) + "px";
}
document.addEventListener('DOMContentLoaded', function () {
  auto_grow();    
  var textarea = document.getElementById('auto-grow');
  textarea.addEventListener('input', auto_grow);  // Call the function on input
});

Upvotes: 0

eiran
eiran

Reputation: 1388

It's an old one, but if someone still looks for this, try display: inline-table;

Upvotes: -1

Roman
Roman

Reputation: 21873

You can use javascript to resize dimentions of textarea as soon as some parent element changes its own, for instance, height. You are going to call the functios (ES6 Javascript version):

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

  document.querySelectorAll(someTextareaSelector)[0].style.height = 
    document.querySelectorAll(someParentElementSelector)[0]
    .getBoundingClientRect().height + "px"

}

const someTextareaSelector = '...' 
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)

Upvotes: 0

Sunnyside Productions
Sunnyside Productions

Reputation: 775

In this case it turned out there was a "min-height" property tucked away for textareas in forms. Apparently the inline styling setting of height does not override the min-height property from the CSS file.

Upvotes: 6

Mark
Mark

Reputation: 1680

If you're using an inline style tag, it will take priority over your CSS styling.

The height property works as expected: JSfiddle here.

You can also set the height by using the rows attribute on the textarea if you have an expected number of lines to be used.

<textarea name='text' spellcheck="true" id="wider" rows="5"></textarea>

Upvotes: 2

Related Questions