min-height not working as expected

[pzheng64]

Hi, Thanks for great auto-expanding plug-in for textarea.

I have an issue in FF latest version (35.0) on Windows. I set rows="1" for my textarea and it is calculated as min-height:51px for single row. The textarea element \has short word value like "Apr", "Save", "Cancel", etc

browser: FF 35.0 OS: Windows 7.0 placement: The elements are nested in <td> tag. value: Short single word (less than 10 characters) plugin version: 0.2.0</p> <p>It works correctly on Chrome (min-height:34px), but on FF it does not.</p> <p>Thanks, Paul.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/domchristie"><img src="https://avatars.githubusercontent.com/u/111734?v=4" />domchristie</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>Hi Paul,</p> <p>What happens when you visit: <a href="http://bgrins.github.io/ExpandingTextareas/test/">http://bgrins.github.io/ExpandingTextareas/test/</a></p> <p>Are there any failures?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/pzheng64"><img src="https://avatars.githubusercontent.com/u/1234847?v=4" />pzheng64</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>Hi Dom,</p> <p>Thanks for your reply. The tests all passed on both browseres</p> <ol> <li>ExpandingTextareas: Ensures the clone is at least as tall as the textarea (0, 1, 1)Rerun42 ms Textarea wrapper CSS <code>min-height</code> set to textarea outer height</li> </ol> <p>Well... this can be said true because textarea itself could be that tall by default if rows="1", but I think the auto-expanding plug-in should make the textarea look good even though how tall the default textarea element looks like.</p> <p>Oh, I forgot one thing to mention. I use bootstrap 3 and added the class form-control, but it doesn't matter.</p> <p>So, if there are only few characters in the textarea, it should have min-height:34px so that there are no unneeded extra space vertically inside textarea.</p> <p>Can you try yourself to test this case?</p> <p>Thanks, Paul.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bgrins"><img src="https://avatars.githubusercontent.com/u/95570?v=4" />bgrins</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>@pzheng64 could you link to a demo page showing the problem? You can use this jsfiddle as a starting point: <a href="http://jsfiddle.net/bgrins/wfsg5mbe/">http://jsfiddle.net/bgrins/wfsg5mbe/</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/domchristie"><img src="https://avatars.githubusercontent.com/u/111734?v=4" />domchristie</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>This looks like it could be a bug with the way Firefox 35 renders <code><textarea rows=1></code> on Windows (with out without the expanding behaviour:</p> <p><img src="https://cloud.githubusercontent.com/assets/111734/5808091/7b571390-a021-11e4-9284-c640f6e14692.png" alt="screen shot 2015-01-19 at 21 23 07" /></p> <p>The bug is noted on the mozilla bug tracker, along with <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=33654#c180">a possible solution</a>—apply the following:</p> <pre><code>textarea { overflow-x: hidden; }</code></pre> <p>(unless you need a horizontal scroll bar)</p> <p>This may be suitable for including in the plugin, too</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bgrins"><img src="https://avatars.githubusercontent.com/u/95570?v=4" />bgrins</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>This looks like it could be a bug with the way Firefox 35 renders <textarea rows=1> on Windows (with out without the expanding behaviour:</p> </blockquote> <p>Wow, good find - that's an old bug. I'm hesitant to add that CSS by default to the plugin to add a workaround for this edge case since it could cause some side effects. And the comment following that one indicates that it may not work, but I haven't tested it.</p> <p>Assuming this is the same issue that is being reported here, we should close this issue since we don't have control over how the browser renders that textarea. @pzheng64 the CSS in <a href="https://github.com/bgrins/ExpandingTextareas/issues/59#issuecomment-70565900">https://github.com/bgrins/ExpandingTextareas/issues/59#issuecomment-70565900</a> <em>may</em> fix your issue, although you should probably be a bit more specific with the selector - something like:</p> <pre><code>textarea.expanding { overflow-x: hidden; }</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/domchristie"><img src="https://avatars.githubusercontent.com/u/111734?v=4" />domchristie</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>This does seem to fix the issue on Windows Firefox, however I think we should set a <code>overflow:hidden</code> or <code>overflow-x:hidden</code> on the textarea when possible (as in <a href="https://github.com/bgrins/ExpandingTextareas/issues/8#issuecomment-33510480">https://github.com/bgrins/ExpandingTextareas/issues/8#issuecomment-33510480</a>)</p> <ul> <li>if textarea has no max-height or wrap settings: <code>overflow: hidden</code></li> <li>else if textarea has max-height, but no wrap settings: <code>overflow-x: hidden</code></li> <li>else <code>overflow: auto</code></li> </ul> <p>(update: else to auto!)</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>