🦂 🧜🏾‍♂️ 🤦🏿 100% width textarea ignores parent element width in IE7

<body>
  
  <header class="page-header js-page-header">
    <a class="page-header-logo-container" href="https://geek-cook.imtqy.com/index.html"></a>
    <div class="page-header-text">Best IT Recipes</div>
  </header>
  <section class="page js-page"><div itemscope="" itemtype="http://schema.org/QAPage" class="page"><div class="main-col" itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question"><div class="question-header"><h1 itemprop="name">  100% width Textarea ignores parent element width in IE7 </h1></div><div class="question"><div class="question-row"><div class="question-text"><div class="description" itemprop="text"><p>  I have the following text box in a table: </p><pre class="prettyprint-override"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"300"</span>></span><span class="hljs-tag"><<span class="hljs-name">tr</span>></span><span class="hljs-tag"><<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%"</span>></span> longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring <span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">td</span>></span><span class="hljs-tag"></<span class="hljs-name">tr</span>></span><span class="hljs-tag"></<span class="hljs-name">table</span>></span></code> </pre> <p>  With a long line in the text field, textarea is stretched to fit on one line in IE7, but retains a width of 300 pixels in other browsers. </p><p>  Any ideas on how to fix this in IE? </p></div><div class="favorite hidden"><i class="far fa-star"></i></div><div class="votes-question"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +9 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="tags">  <span class="former-link">html</span> <span class="former-link">css</span> <span class="former-link">internet-explorer-7</span> </div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">Emmett</span></span></span> <span title="2008-08-29 03:57">Aug 29</span>  <span title="2008-08-29 03:57">'08 at 3:57</span> <span class="hidden" itemprop="dateCreated" datetime="2008-08-29 03:57">2008-08-29 03:57</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answers " id="answers_hash"><div class="answers-header">  <span class="pull-left"><span itemprop="answerCount">12</span> answers</span> <div class="clearfix"></div></div><div class="answer-pager hidden"></div><div class="answer" id="523903_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  Apply width to <code>td</code> , not <code>table</code> . </p><p>  EDIT: @Emmett - Width can also be easily applied via CSS. </p><pre class="lang-css prettyprint-override"> <code class="hljs"><span class="hljs-selector-tag">td</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>; }</code> </pre><p>  gives the desired result.  Or, if you are using jQuery, you can add width with a script: </p><pre class="prettyprint-override"> <code class="hljs javascript">$(<span class="hljs-string">'textarea[width=100%]'</span>).parent(<span class="hljs-string">'td'</span>).css(<span class="hljs-string">'width'</span>, <span class="hljs-string">'300px'</span>);</code> </pre><p>  A point is more than one way to apply width to a table cell if development restrictions hinder direct application. </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +4 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">dansays</span></span></span> <span title="2008-08-29 04:15">Aug 29</span>  <span title="2008-08-29 04:15">'08 at 4:15</span> <span class="hidden" itemprop="dateCreated" datetime="2008-08-29 04:15">2008-08-29 04:15</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer rltd" id="523904_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  @ <span class="former-link">Peter Meyer</span> , <span class="former-link">Jim Robert</span> </p><p>  I tried different overflow values, but to no avail. </p><p>  The experiment with different values for the wrap attribute and word-wrap style was also not fruitful. </p><p>  EDIT: </p><p>  @ <span class="former-link">dansays</span> , <span class="former-link">seanb</span> </p><p>  Due to some uncomfortable application-specific restrictions, the width can only be applied to the table. </p><p>  @ <span class="former-link">travis</span> </p><p>  Setting style = "word-break: break-all;"  kind of work!  In IE7 and FF, it still wraps differently.  I will accept this answer if nothing comes better. </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +2 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">Emmett</span></span></span> <span title="2008-08-29 04:15">Aug 29</span>  <span title="2008-08-29 04:15">'08 at 4:15</span> <span class="hidden" itemprop="dateCreated" datetime="2008-08-29 04:15">2008-08-29 04:15</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer bt" id="523918_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  Another hacker option, but the only option that works for me - none of the other suggestions on this page is to wrap the text field in one cell table with a fixed table location. </p><pre class="prettyprint-override"> <code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%;table-layout:fixed"</span>></span><span class="hljs-tag"><<span class="hljs-name">tr</span>></span><span class="hljs-tag"><<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%"</span>></span>longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring<span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">td</span>></span><span class="hljs-tag"></<span class="hljs-name">tr</span>></span><span class="hljs-tag"></<span class="hljs-name">table</span>></span></code> </pre></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +2 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name">Jeroen Ritmeijer</span></span> <span title="2009-02-27 13:19">Feb 27</span>  <span title="2009-02-27 13:19">'09 at 13:19</span> <span class="hidden" itemprop="dateCreated" datetime="2009-02-27 13:19">2009-02-27 13:19</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer" id="523916_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  Another very hacky option, if you are stuck with a lot of restrictions, but know what the surrounding dom looks like: </p><pre class="prettyprint-override"> <code class="hljs ini"><span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"</span></code> </pre><p>  not really, but it works in IE7. <br>  Using jquery or the like would be a much more neat solution, but it depends on other limitations that you have. </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +1 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">seanb</span></span></span> <span title="2008-08-30 01:50">Aug 30</span>  <span title="2008-08-30 01:50">'08 at 1:50</span> <span class="hidden" itemprop="dateCreated" datetime="2008-08-30 01:50">2008-08-30 01:50</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer" id="523900_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  You tried... </p><p> <code>overflow: hidden;</code> </p> <p>  ?? </p><p>  I'm not sure what this should be in the text box table ... experiment a bit </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">Jiaaro</span></span></span> <span title="2008-08-29 04:00">Aug 29</span>  <span title="2008-08-29 04:00">'08 at 4:00</span> <span class="hidden" itemprop="dateCreated" datetime="2008-08-29 04:00">2008-08-29 04:00</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer" id="523901_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  or how about: </p><pre class="prettyprint-override"> <code class="hljs http"><span class="hljs-attribute">overflow</span>: scroll;</code> </pre><p>  Edit: </p><p>  I really tested this.  I think the behavior is like that because the width is on the table, which I think (I have nothing to support it).  I read for a long time that the width of the table is the recommended width, but it can be expanded to accommodate its contents.  Not sure.  I know if you use a <code><DIV></code> and not a table, this works.  Also, if you apply a width of 300 pixels to the containing <code><TD></code> element, unlike the <code><TABLE></code> element, it also works.  Also, <code>overflow: scroll</code> does nothing !: P </p><p>  Nice, funny IE behavior, of course! </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">Peter Meyer</span></span></span> <span title="2008-08-29 04:03">Aug 29</span>  <span title="2008-08-29 04:03">'08 at 4:03</span> <span class="hidden" itemprop="dateCreated" datetime="2008-08-29 04:03">2008-08-29 04:03</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer" id="523902_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  IE also supports the CSS 3 <a href="http://msdn.microsoft.com/en-us/library/ms531184.aspx" rel="nofollow noreferrer"><code>word-break</code></a> property. </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">travis</span></span></span> <span title="2008-08-29 04:13">Aug 29</span>  <span title="2008-08-29 04:13">'08 at 4:13</span> <span class="hidden" itemprop="dateCreated" datetime="2008-08-29 04:13">2008-08-29 04:13</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer" id="523914_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  The best I could find to get it to work was a bit of a hack: <br>  wrap textarea with <code><div style="width:300px; overflow:auto;"></code> might want to play with the overflow value </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">seanb</span></span></span> <span title="2008-08-29 04:15">Aug 29</span>  <span title="2008-08-29 04:15">'08 at 4:15</span> <span class="hidden" itemprop="dateCreated" datetime="2008-08-29 04:15">2008-08-29 04:15</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer" id="523915_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  Overflow property is the way to go.  In particular, if you want additional text to be ignored, you can use "overflow: hidden" as the css property in the text. </p><p>  In the general case, when the browser has an indestructible object, such as a long line without spaces, it may have a conflict between various size restrictions - the values of the line (long) and its container (short).  If you see different behavior in different browsers, they just solve this conflict in different ways. </p><p>  By the way, there is a good trick available for long lines - the <wbr> tag.  If your browser sees a longstringlongstring, then it will try to put it in the container as a single solid line, but if it does not fit, it will break this line in half on wbr.  This is basically a break point with an implicit request not to break there if possible (sort of like a hyphen in printed texts).  By the way, this is a bit incorrect in some versions of Safari and Opera - check out <a href="http://www.quirksmode.org/oddsandends/wbr.html" rel="nofollow noreferrer">this general page</a> for more details. </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">Tyler</span></span></span> <span title="2008-08-29 08:45">Aug 29</span>  <span title="2008-08-29 08:45">'08 at 8:45</span> <span class="hidden" itemprop="dateCreated" datetime="2008-08-29 08:45">2008-08-29 08:45</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer" id="523917_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  I have encountered this problem before.  This is due to how HTML analyzes the width of the table and cell. </p><p>  You set 300 exactly as width until the content of the element can never exceed this (setting a div with a specific width inside and an overflow rule is my favorite way). </p><p>  But in the absence of such a solution, as indicated above, the moment when ANY element pushes you beyond this width, all bets are disabled.  The element is becoming as wide as it is for placing content. </p><p>  Extra tip is to specify the width values in any set of quotes to correctly determine the value ( <code><table width='300'</code> ).  If someone comes and changes it to%, he will ignore%, otherwise. </p><p>  Unfortunately, you will always have problems with line breaks that do not have “natural” breaks in IE, unless you can do something to break them by code. </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">John Dunagan</span></span></span> <span title="2009-01-16 15:13">Jan 16</span>  <span title="2009-01-16 15:13">'09 at 15:13</span> <span class="hidden" itemprop="dateCreated" datetime="2009-01-16 15:13">2009-01-16 15:13</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer" id="523919_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  To solve this problem, you use a space in your text, and you use this code too </p><pre class="prettyprint-override"> <code class="hljs css"><span class="hljs-selector-tag">overflow</span><span class="hljs-selector-pseudo">:hidden</span></code> </pre></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">Saeed Py</span></span></span> <span title="2012-10-22 10:03">Oct 22</span>  <span title="2012-10-22 10:03">'12 at 10:03</span> <span class="hidden" itemprop="dateCreated" datetime="2012-10-22 10:03">2012-10-22 10:03</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="answer last" id="523920_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  Give the width in pixels.  This should work correctly. </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span class="former-link">Muk</span></span></span> <span title="2012-11-28 10:38">Nov 28</span>  <span title="2012-11-28 10:38">'12 at 10:38</span> <span class="hidden" itemprop="dateCreated" datetime="2012-11-28 10:38">2012-11-28 10:38</span> </div>  <span class="former-link">source</span> <span class="former-link">share</span> <div class="clearfix"></div></div></div></div><div class="text-center"></div><div class="answer-pager hidden"></div><div class="text-center"></div></div></div></div>
      <br>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
          style="display:block; text-align:center;"
          data-ad-layout="in-article"
          data-ad-format="fluid"
          data-ad-client="ca-pub-4469282388984999"
          data-ad-slot="7248419616"></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      <br>
    
<section class="more-articles-navigation-panel js-more-articles-navigation-panel">
<h4>More articles:</h4>
<nav class="list-of-articles-container js-list-of-articles-container"><ul class="list-of-pages js-list-of-pages">
<li><a href="../78955/index.html">disable elements in UIView behind modal UIView - objective-c</a></li>
<li><a href="../78956/index.html">UIScreen applicationFrame returns incorrect rectangle when launching landscape application (iPhone / iPad) - iphone</a></li>
<li><a href="../78957/index.html">C # Extension Method - String Split, which also accepts Escape - split</a></li>
<li><a href="../78958/index.html">What Lisp dialect should I recognize? - lisp</a></li>
<li><a href="../7896/index.html">What is the best way to connect and use sqlite database from C # - c #</a></li>
<li><a href="../78962/index.html">How to split a row (e.g. long URL) in a table cell using CSS? - css</a></li>
<li><a href="../78963/index.html">ASP.NET MVC - How to show an unauthorized error on the login page? - c #</a></li>
<li><a href="../78964/index.html">How to determine when window shape is minimized? - c #</a></li>
<li><a href="../78965/index.html">ASP.Net MVC authorization action filter - asp.net</a></li>
<li><a href="../78966/index.html">Which Lisp should I learn? - lisp</a></li>
</ul></nav>
</section><br />
<a href="../../allArticles.html"><strong>All Articles</strong></a>
<script src="../../js/main.js"></script>

<script type="text/javascript" >
  (function (d, w, c) {
      (w[c] = w[c] || []).push(function() {
          try {
              w.yaCounter55090465 = new Ya.Metrika({
                  id:55090465,
                  clickmap:true,
                  trackLinks:true,
                  accurateTrackBounce:true,
                  webvisor:true
              });
          } catch(e) { }
      });

var n = d.getElementsByTagName("script")[0],
          s = d.createElement("script"),
          f = function () { n.parentNode.insertBefore(s, n); };
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
          d.addEventListener("DOMContentLoaded", f, false);
      } else { f(); }
  })(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/55090465" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

<script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-146494335-1', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>

</section>

</html>