[BUGFIX] Reset ExtJS 3 CSS box-model

We have box-models in CSS. They define how the dimensions of
elements are calculated. Modern CSS is based on the border-box
outline definition where the *outer* dimensions are defined and
not the *inner* dimensions.

Bootstrap, Foundation and ExtJS 4 use the modern box sizing
"border-box". This is the default now.

ExtJS 3 CSS is based on the "old" content-box definition. Since
CMS still uses ExtJS 3 we need to move ExtJS elements back into
the former box-sizing mode.

This patch sets box-sizing back to the previous content-box for
input fields. Most dimensions in other widgets and elements are
calculated with the help of JS and not based on CSS itself. Thus
.x-form-field should be enought for the start.

Resolves: #61574
Related: #32954
Releases: master
Change-Id: Iacb9b0d3628940718ac5ba0099398320769f14ac
Reviewed-on: http://review.typo3.org/32760
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>

diff --git a/typo3/sysext/t3skin/extjs/xtheme-t3skin.css b/typo3/sysext/t3skin/extjs/xtheme-t3skin.css
index 4906064..00e57c4 100644 (file)
--- a/typo3/sysext/t3skin/extjs/xtheme-t3skin.css
+++ b/typo3/sysext/t3skin/extjs/xtheme-t3skin.css
@@ -670,6 +670,12 @@ ul.x-tab-strip-bottom{
        border-color:#A2AAB8;
 }
 
+.x-form-field {
+       -webkit-box-sizing: content-box;
+       -moz-box-sizing: content-box;
+       box-sizing: content-box;
+}
+
 .x-form-text, textarea.x-form-field{
        background-color:#fff;
        background-image: none;