Page MenuHomePhabricator

Use box-sizing:border-box when using width:100%;padding:0.1em for textarea
Closed, ResolvedPublic

Description

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.


Version: 1.20.x
Severity: minor

attachment textarea-box-sizing.patch ignored as obsolete

Details

Reference
bz56692

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 2:14 AM
bzimport set Reference to bz56692.
Fomafix created this task.Nov 6 2013, 9:19 PM

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;

	}

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.

Attached:

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