Textarea width bug in chrome

[jsandfordhughes]

I have found a bug in chrome with the textarea. When using the textarea with the class .materialize-textarea

When scaling the browser window down from desktop to mobile the textarea overflows on the right making lots of white space. I cannot see this overflow in dev tools however I think it is down to the javascript used on the textarea.

If you reload the page when in mobile view the issue is gone, this only happens when scaling down from a larger screen.

If I copy all the css classes to my own class and remove the materialize-textarea class the bug is fixed however the javascript is now not running on the textarea so it doesn't change its height when entering a new line. Im thinking the bug could be something to do with the javascript?

[pwcreative]

@jojodadj can you link to your project and or build a codepen showing the issue? The bug you are describing does not happen with the materialize docs page so it suggests there is an error in your code. Did you use the exact markup from the docs?

<div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea"></textarea>
          <label for="textarea1">Textarea</label>
        </div>
      </div>
    </form>
  </div>

https://materializecss.com/text-inputs.html#textarea

Also, are you dynamically updating the contents of the text area?

advanced note: When dynamically changing the value of a textarea with methods like jQuery's .val(), you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea.

[jsandfordhughes]

I have just tested in code pen and it works as it should however I have attached here a basic HTML file, if you open this in chrome and then resize the window you will see it does not resize correctly. If you refresh the page once in mobile view it will then work.

If you then comment out the Materialize script tag the window then resizes fine.

test.html.zip

[pwcreative]

It works fine. I've attached your html file with the materialize.js uncommented, and it works just as it should. If you can't replicate in a codepen then the issue is coming from somewhere else.

test.html 2.zip

You should really get some advice in the gitter channel before opening an issue here - this is for actual bugs that can be reproduced.

[jsandfordhughes]

This turns out it is a bug in Chrome for Mac, at the end of the day this is a bug that I found while using Materialize and could reproduce it in my own environment. If anything someone else who is having this issue will find this post and hopefully the next version of chrome will fix this.