Last modified: 2014-01-27 20:07:26 UTC
Created attachment 13716 [details] box-sizing:border-box for textarea Bug 40610 identified an overflowing textarea for #editform and fixed this. All textarea elements overflows because they use the following CSS definition from skins/common/commonElements.css: textarea { width: 100%; padding: .1em; } Examples with overflowing textarea elements: [[Special:Upload]], [[Special:ExpandTemplates]], #config-live-log in the webinstaller, ... In standard compliance mode of the box model this generates a width of 100% plus .1em for the border box. To create a border box with a width of 100% definition box-sizing:border-box should be added: textarea { width: 100%; padding: .1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } See attached patch. Maybe the remaining #editform textarea { display: block; } can be also omitted. Some extensions also use textarea { box-sizing: border-box; } which is superseded by the patch.
Thanks! These changes look good, I haven't tested them but it looks like something we should be applying in core and get out soon. I'd like yo to elaborate about the following line-change, however. Generally we shouldn't be doing overflow: hidden, as that suggests there is content being clipped out of accessible/visible scope. Was this left-over from testing or on purpose? If the latter, please explain why it is needed (perhaps another solution can be devised instead). --- config.css +++ config.css #config-live-log - margin-right: 18em; + overflow: hidden; }
Created attachment 13719 [details] display:block and box-sizing:border-box for textarea The #config-live-log { overflow: hidden } was not a mistake. Nothing gets clipped out because the textarea wraps the content. The webinstaller generates the following HTML: <div class="config-page-list">Floating box</div> <h2>Heading</h2> <div id="config-live-log"><textarea>Livelog</textarea></div> The heading uses already h2 { overflow: hidden } to stop the bottom line at the margin of the floating box. The #config-live-log { margin-right: 18em } generates a big right margin with fixed width to keep space for the floating box because the div and the floating box overlap. #config-live-log { overflow: hidden } is a trigger to generate a div with a width of the remaining space without the floating box. #config-live-log { display: flex } is an other possibility to generate the same result. But the Internet Explorer doesn't support display: flex. (https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility) An additional #config-live-log { min-width: 20em } is useful to allow wrapping the livelog below the floating box when the window is too small. I put this in the new patch. http://www.w3.org/TR/2010/WD-CSS2-20101207/sample.html suggests a initial value textarea { display: inline-block } With textarea { width: 100% } a textarea { display: block } would be general useful or the following box is bigger than the screen: <div style="white-space:nowrap">start text <textarea>textarea</textarea> end text</div> I put these changes in the new patch.
Maybe this patch also solves bug 19334 for Internet Explorer 8 in standard compliant mode. So the workaround https://www.mediawiki.org/wiki/Special:Code/MediaWiki/62191 can be removed.
Change 105207 had a related patch set uploaded by Gerrit Patch Uploader: Use box-sizing:border-box for textarea https://gerrit.wikimedia.org/r/105207
This should be fixed now. Bug 19334 / bug 60237 are separate ones.
Change 105207 merged by jenkins-bot: Use box-sizing:border-box for textarea https://gerrit.wikimedia.org/r/105207
