Html – Problem with and width</h1> </header> <p style='font-size:1.2em'><span class="mr-2 badge badge-success">css</span><span class="mr-2 badge badge-info">html</span></p> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="5017103864" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="entry-content"> <p>In the following code, both the INPUT and TEXTAREA elements render wider than they should. How can I limit them to 100% of the usable area within the div?</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style> .mywidth{ width:100%; } </style> </head> <body> <div style="border: 3px solid green; width: 100px;"> <input class="mywidth" ><br /> <textarea class="mywidth"></textarea><br /> <div style="background-color: yellow;" class="mywidth">test</div> </div> </body> </html> </code></pre> <p>Note: If I remove the DOCTYPE, it renders as expected, with the INPUT, TEXTAREA and inner DIV all the same width and not going outside the containing DIV.</p> <p>Update: Not withstanding the default borders on those elements, it still appears to render incorrectly in <strong>IE7</strong>.</p> </div> <div id="comments" class="comments-area"> <div class="row"> <div class="col-12"> <div class="mt-3 border-bottom border-success"> <h4 class="text-success"><i class='fa fa-check-circle text-success mr-3'></i><span>Best Answer</span></h4> </div> <div class='bg-transparent mb-3'> <p>I had this same problem. I used the box-sizing property mentioned here:</p> <p><a href="https://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present#answer-2515439" rel="nofollow ugc">How can I make a TextArea 100% width without overflowing when padding is present in CSS?</a></p> <p>Here's what it looked like for me:</p> <pre><code><style> .mywidth{ width:100%; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } </style> </code></pre> </div> </div> <div class="col-4"></div> </div> </div> <div id="related-embeded" class="related-embeded-area"><div class="row"><div class="col-12"><div class="mt-3 border-bottom border-success"><h4 class="text-info"><i class='fa fa-check-circle text-info mr-3'></i><span>Related Solutions</span></h4></div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnotes.com/tecnote/html-vs-which-to-use/'>Html – <button> vs. <input type="button" />. Which to use</a></h5></div><div class='bg-transparent mb-3'> <ul> <li><a href="http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/" rel="noreferrer nofollow ugc">Here's a page</a> describing the differences (basically you can put html into a <code><button></button></code>)</li> <li><a href="http://www.peterbe.com/plog/button-tag-in-IE" rel="noreferrer nofollow ugc">And another page</a> describing why people avoid <code><button></button></code> (Hint: IE6)</li> </ul> <p>Another IE problem when using <code><button /></code>:</p> <blockquote> <p>And while we're talking about IE, it's got a couple of bugs related to the width of buttons. It'll mysteriously add extra padding when you're trying to add styles, meaning you have to add a tiny hack to get things under control.</p> </blockquote> </div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnotes.com/tecnote/html-styling-an-input-typefile-button/'>Html – Styling an input type=”file” button</a></h5></div><div class='bg-transparent mb-3'> <h3>You don't need JavaScript for this! Here is a cross-browser solution:</h3> <p><a href="http://jsfiddle.net/4cwpLvae/" rel="noreferrer nofollow ugc"><strong>See this example!</strong></a> - It works in Chrome/FF/IE - (IE10/9/8/7)</p> <p>The best approach would be to have a custom label element with a <code>for</code> attribute attached to a <strong>hidden</strong> file input element. (The label's <code>for</code> attribute must match the file element's <code>id</code> in order for this to work).</p> <pre><code><label for="file-upload" class="custom-file-upload"> Custom Upload </label> <input id="file-upload" type="file"/> </code></pre> <p>As an alternative, you could also just wrap the file input element with a label directly: <a href="http://jsfiddle.net/1pc9pcev/" rel="noreferrer nofollow ugc"><strong>(example)</strong></a></p> <pre><code><label class="custom-file-upload"> <input type="file"/> Custom Upload </label> </code></pre> <p>In terms of styling, just hide<sup>1</sup> the input element using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" rel="noreferrer nofollow ugc">attribute selector</a>.</p> <pre><code>input[type="file"] { display: none; } </code></pre> <p>Then all you need to do is style the custom <code>label</code> element. <a href="http://jsfiddle.net/4cwpLvae/" rel="noreferrer nofollow ugc"><strong>(example)</strong></a>.</p> <pre><code>.custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; } </code></pre> <hr/> <p><sup>1</sup> - It's worth noting that if you hide the element using <code>display: none</code>, it won't work in IE8 and below. Also be aware of the fact that jQuery validate <a href="https://stackoverflow.com/questions/8466643/jquery-validate-enable-validation-for-hidden-fields" rel="nofollow ugc">doesn't validate hidden fields</a> by default. If either of those things are an issue for you, here are two different methods to hide the input (<a href="http://jsfiddle.net/9Lzjzwr7/" rel="noreferrer nofollow ugc"><strong>1</strong></a>, <a href="http://jsfiddle.net/m8x2fobw/" rel="noreferrer nofollow ugc"><strong>2</strong></a>) that work in these circumstances.</p> </div></div></div></div> </div> <div class="col-12 col-md-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="2985450245" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class='mt-3 ml-4 border-bottom border-success'><h6><span>Related Topic</span></h6></div><ul class='list-group list-group-flush'><li class="list-group-item"><a href='https://itecnotes.com/tecnote/css-how-to-center-an-absolutely-positioned-element-in-a-div/'>Css – How to center an absolutely positioned element in a div</a></li></ul> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="8970621700" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <footer class="entry-footer"> </footer> </article> </div> </div> </div> </main> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info"> </div> </footer> </div> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4' id='jquery-js'></script> <script type='text/javascript' id='jquery-js-after'> jQuery(document).ready(function ($) { const elements = document.getElementsByClassName("js-post-notice"); while(elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } }) </script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js?ver=4.3.1' id='bootstrap4-js'></script> <script type='text/javascript' src='https://itecnotes.com/wp-includes/js/comment-reply.min.js?ver=5.9.10' id='comment-reply-js'></script> </body> </html>