Use 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;
}

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;
}

Bug: 56692
Change-Id: Ife1cf74ca33b4f53ec052947bd8b7b2fd28705ce

diff --git a/resources/mediawiki/mediawiki.feedback.js b/resources/mediawiki/mediawiki.feedback.js
index 1afe51e..9de69b2 100644 (file)
--- a/resources/mediawiki/mediawiki.feedback.js
+++ b/resources/mediawiki/mediawiki.feedback.js
@@ -106,12 +106,12 @@
                                                $( '<div style="margin-top: 1em;"></div>' ).append(
                                                        mw.msg( 'feedback-subject' ),
                                                        $( '<br>' ),
-                                                       $( '<input type="text" class="feedback-subject" name="subject" maxlength="60" style="width: 99%;"/>' )
+                                                       $( '<input type="text" class="feedback-subject" name="subject" maxlength="60" style="width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;"/>' )
                                                ),
                                                $( '<div style="margin-top: 0.4em;"></div>' ).append(
                                                        mw.msg( 'feedback-message' ),
                                                        $( '<br>' ),
-                                                       $( '<textarea name="message" class="feedback-message" style="width: 99%;" rows="5" cols="60"></textarea>' )
+                                                       $( '<textarea name="message" class="feedback-message" rows="5" cols="60"></textarea>' )
                                                )
                                        ),
                                        $( '<div class="feedback-mode feedback-bugs"></div>' ).append(

diff --git a/skins/cologneblue/screen.css b/skins/cologneblue/screen.css
index bc5dd31..40a9432 100644 (file)
--- a/skins/cologneblue/screen.css
+++ b/skins/cologneblue/screen.css
@@ -56,9 +56,6 @@ p, pre, .mw-code, td, th, li, dd, dt {
 textarea {
        overflow: auto;
        width: 100%;
-}
-
-#editform textarea {
        display: block;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;

diff --git a/skins/common/commonContent.css b/skins/common/commonContent.css
index 35071a4..a869923 100644 (file)
--- a/skins/common/commonContent.css
+++ b/skins/common/commonContent.css
@@ -150,16 +150,6 @@ img.thumbborder {
        border: 1px solid #dddddd;
 }
 
-/**
- * Edit forms
- */
-#editform textarea {
-       display: block;
-       -moz-box-sizing: border-box;
-       -webkit-box-sizing: border-box;
-       box-sizing: border-box;
-}
-
 /**
  * Basic styles for the user login and create account forms
  */

diff --git a/skins/common/commonElements.css b/skins/common/commonElements.css
index 742f839..ad7942a 100644 (file)
--- a/skins/common/commonElements.css
+++ b/skins/common/commonElements.css
@@ -207,6 +207,10 @@ form {
 textarea {
        width: 100%;
        padding: .1em;
+       display: block;
+       -moz-box-sizing: border-box;
+       -webkit-box-sizing: border-box;
+       box-sizing: border-box;
 }
 select {
        vertical-align: top;

diff --git a/skins/common/config.css b/skins/common/config.css
index 39206c3..d646273 100644 (file)
--- a/skins/common/config.css
+++ b/skins/common/config.css
@@ -138,5 +138,6 @@
 }
 
 #config-live-log {
-       margin-right: 18em;
+       overflow: hidden;
+       min-width: 20em;
 }

diff --git a/skins/modern/main.css b/skins/modern/main.css
index 5da7d5b..6f73f0e 100644 (file)
--- a/skins/modern/main.css
+++ b/skins/modern/main.css
@@ -155,8 +155,7 @@ div.mw_clear {
 textarea {
        width: 100%;
        padding: .1em;
-}
-#editform textarea {
+       display: block;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;