Comments (4)
I have a similar problem, but I can reproduce it in IE 8,9 and Chrome.
http://jsfiddle.net/a9k5t/4/
What appears to be happening is that the width of the hidden textarea is undefined, and thereby the mirror is being set to a width of 0px. This causes one character per line, and thereby one row per character.
There is a workaround to manually trigger the resize after showing it, but it does not seem to work without a short delay:
http://jsfiddle.net/a9k5t/5/
It's not ideal, as it may cause the textbox to temporarily display as huge. I've curious if anyone else has any ideas.
from autosize.
Same here, IE9, Chrome and FF. We load some html (includes form) via ajax and autosized textarea is oversized.
from autosize.
This is happening because the mirrored textarea copies the original textarea's width, but there could be other complications too. The DOM methods for taking measurements are going to report a width/height of 0 for hidden elements. Since the mirror element copies a width of 0, it ends up rendering with a large height to accommodate the words.
So this isn't surprising behavior. I wouldn't mind accounting for it, but I'm not sure if there is a clean way to handle it. I was just testing this, and I was surprised to find out that window.getComputedStyle will return the correct width/height if the element has a hidden display, but not if the element is hidden due to an ancestor element having a hidden display. Not sure why there is a differentiation there:
I expect that the best solution here is going to rely on users (you guys) not assigning plugins that need width/height calculations to hidden elements (sorry). Instead of hiding the parent element, you could give it a height/padding of 0 and hide the overflow. Also, if the textarea had a width/height style set (through CSS or JS), then the DOM methods could return those values.
from autosize.
Example hiding by using a 0 height parent:
http://jsfiddle.net/a9k5t/11/
from autosize.
Related Issues (20)
- How do i apply autosize for textareas created using JQuery ? HOT 3
- How to resize plus additional more row. HOT 2
- Bug with scroll-behavior: smooth HOT 2
- Padding bottom not working with Firefox ? HOT 4
- 5.0.0 not marked as latest HOT 1
- ESM version uses ES6+ syntax other than import and export HOT 2
- 通过getRealMetrics方法获取density和通过getDisplayMetrics()获取的density值不一致 HOT 1
- Bug: Plugin Sporadically Adds Disabled Vertical Scrollbar HOT 1
- Adapter some phones for suddenly amplify the views and shrinking after.
- Page scrolls up when typing (when being zoomed out in Safari) HOT 5
- When the end of the line is reached, pressing the spacebar does not switch to a new line. HOT 1
- autosize 与multdex 在低版本上运行报错
- The account name input field collapses when trying to insert prohibited characters HOT 6
- Conflicting with LastPass Browser Extension HOT 1
- [issue]autosize after changing padding HOT 2
- Release note for each major update? HOT 2
- Text "jumps" when new line since 6.0.1 HOT 2
- [6.0.0 regression] Disabled horizontal scrollbar appears when reaching max-height HOT 3
- Jerky inertial scrolling on iOS HOT 1
- Uncaught TypeError: e.has is not a function with dist/autosize
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from autosize.