PDA

View Full Version : [FIXED][2.x/3.x] WebKit CSS fixes



mystix
26 Apr 2009, 10:07 PM
as a follow-up from this post in the Google Chrome thread in Open Discussion:
http://extjs.com/forum/showthread.php?p=310525#post310525
i'm proposing the following (commented) list of css fixes for Webkit-based browsers.

3.x


.ext-webkit *:focus{outline:none;}/* remove blue safari / yellow chrome input field border */
.ext-webkit .x-form-field-wrap .x-form-trigger{height:21px;}/* non-grid triggerfields */
.ext-webkit .x-small-editor .x-form-text{padding-top:3px;font-size:100%;}/* safari / chrome combo grid editor text padding */
.ext-webkit .x-small-editor .x-form-trigger{height:19px!important;}/* grideditor combo trigger */
.ext-webkit .x-toolbar .x-form-text{padding:2px;height:14px!important;font-size:100%;}/* input fields / comboboxes in toolbars */
.ext-webkit .x-grid3-cell-inner{height:14px;}/* editorgrid editable cell height */
.ext-webkit .x-btn-text-icon .x-btn-center .x-btn-text{padding-right:4px;}/* Ext.Buttons right-padding */



2.x


.ext-safari *:focus,.ext-chrome *:focus{outline:none;}/* remove safari / chrome input field border */
.ext-safari .x-form-field-wrap .x-form-trigger,.ext-chrome .x-form-field-wrap .x-form-trigger{height:21px;}/* non-grid triggerfields */
.ext-safari .x-small-editor .x-form-text,.ext-chrome .x-small-editor .x-form-text{padding-top:3px;font-size:100%;}/* safari / chrome combo grid editor text padding */
.ext-safari .x-small-editor .x-form-trigger,.ext-chrome .x-small-editor .x-form-trigger{height:19px!important;}/* grideditor combo trigger */
.ext-safari .x-toolbar .x-form-text,.ext-chrome .x-toolbar .x-form-text{padding:2px;height:14px!important;font-size:100%;}/* input fields / comboboxes in toolbars */
.ext-safari .x-grid3-cell-inner,.ext-chrome .x-grid3-cell-inner{height:14px;}/* editorgrid editable cell height */
.ext-safari .x-btn-text-icon .x-btn-center .x-btn-text,.ext-chrome .x-btn-text-icon .x-btn-center .x-btn-text{padding-right:4px;}/* Ext.Buttons right-padding */


and the accompanying 2.x / 3.x fix for safari / chrome editorgrid combos:


.ext-safari .x-small-editor .x-form-text{height:15px!important;}
.ext-chrome .x-small-editor .x-form-text{height:14px!important;}


disclaimer: i am not a CSS guru ;)
these were discovered through trial and error.

Condor
26 Apr 2009, 10:27 PM
This rule is to general:

.ext-webkit .x-grid3-cell-inner{height:14px;}
(it also affects normal gridpanels with multiline content)

What was the exact problem that required this addition?

mystix
26 Apr 2009, 10:29 PM
iirc, it was for textfields in editorgrids having incorrect heights.

p.s. thanks for verifying the css overrides :)

mystix
11 May 2009, 11:05 PM
found a few more spots where webkit css updates are necessary:



/* Webkit unselectable css fixes */
/* for some strange reason Chrome still uses on -khtml-user-select, so that rule is still required where missing in ext-all.css */

.x-unselectable,.x-unselectable *{-webkit-user-select:ignore;}

.x-grid3-row td,.x-grid3-summary-row td{-khtml-user-select:none;-webkit-user-select:ignore;}

.x-grid3-focus{-webkit-user-select:text;}

.x-grid3-cell-text,.x-grid3-hd-text{-webkit-user-select:ignore;}

.x-grid3-hd{-khtml-user-select:none;-webkit-user-select:ignore;}

.x-grid3-cell,.x-grid3-cell-first{-khtml-user-select:none;-webkit-user-select:ignore;} /* prevents grid cells from being selected -- same behaviour as unselectable="on" */

.x-tree-node a,.x-dd-drag-ghost a{-webkit-user-select:none;}

.x-menu-list-item{-webkit-user-select:ignore;}

.x-menu-focus{-webkit-user-select:text;}

.x-slider-focus{-webkit-user-select:text;}

simply place the above css overrides in an overrides.css file and include it immediately after ext-all.css.

note: if i'm not mistaken, the unselectable="on" HTMLElement attribute is valid only for gecko browsers, and should be replaced by the x-unselectable class if possible.

evant
28 May 2009, 6:52 AM
Fixed in SVN.

mystix
28 May 2009, 7:38 PM
almost, but not quite ;)

tested the examples using the latest 2.x / 3.x css in SVN on the following browsers
(all on WinXP):

IE6
Opera 9.64
Safari 4 (beta)
Chrome 2.0.172.30 (beta)
Firefox 3.0.10



note the address bar in all the screenshots:

ext-2.3 implies the latest 2.x SVN
ext-3.1 implies the latest 3.x SVN



Safari 4 (beta)
http://content.screencast.com/users/mystix/folders/Jing/media/8dda2170-21b3-4666-8ff8-d2e63acdfdff/2009-05-29_1053.png
_________________________________________________________________

http://content.screencast.com/users/mystix/folders/Jing/media/64d36ac8-a4d8-482f-892f-2cf1962f14cf/2009-05-29_1100.png
_________________________________________________________________

http://content.screencast.com/users/mystix/folders/Jing/media/5bf00d88-bb29-4a3d-8b87-1a45e58ed918/2009-05-29_1107.png




Chrome 2.0.172.30 (beta)
http://content.screencast.com/users/mystix/folders/Jing/media/0ac2999f-d92b-45ea-ae85-f7ff3f5b32ac/2009-05-29_1121.png
_________________________________________________________________

update: the Editor is actually the right height in 2.x -- it's just 1px lower (from the top of the containing grid cell) than the Editor in the 3.x branch.
http://content.screencast.com/users/mystix/folders/Jing/media/ba438536-5aec-4393-aec7-089b50ec76a0/2009-05-29_1119.png




Internet Explorer 6
http://content.screencast.com/users/mystix/folders/Jing/media/01ccb3b3-36ba-4325-9089-c2f73a28b0c3/2009-05-29_1126.png




Firefox 3.0.10
update: the Editor is actually the right height in 2.x -- it's just 1px lower (from the top of the containing grid cell) than the Editor in the 3.x branch.
http://content.screencast.com/users/mystix/folders/Jing/media/fec98b97-8339-4ce1-999f-8df602fde5a0/2009-05-29_1130.png

mystix
28 May 2009, 7:39 PM
alritey, saw some SVN commits for the 3.x branch right after i posted. hold on while i check...

mystix
28 May 2009, 8:03 PM
done checking. most of the problems i highlighted in post #6 remain.