PDA

View Full Version : [SOLVED] CSS bug in Chrome/Air when dblclick on a cell



PranKe01
3 Jan 2010, 5:46 AM
Hi,

there is a css-bug in the grid, when double clicking a row in Chrome and Adobe Air. In Firefox and Internet Explorer it's behaviour is ok.
Open http://www.extjs.com/deploy/dev/examples/grid/xml-grid.html with Chrome and double click on any item - there will be a big line on the bottom of the selected row which is as big as the grid. I tried to find out where the line is from, but with the debugger I didn't find anything :(

Does anyone know a workaround?

makana
3 Jan 2010, 8:04 AM
...as big as the grid, hey? how does it look like?
I don't have Chrome installed but it seems like this (http://www.extjs.com/forum/showthread.php?p=257359#post257359) issue?

I use this in Adobe AIR:


body {
-webkit-user-drag: none;
-webkit-user-modify: read-only;
-webkit-user-select: none;
}
input, textarea, td, div {
outline: none;
}

and don't have any problems with "lines as big as the grid" or other hideous stuff like that...

I started the xml-grid example in Adobe AIR without the above code and didn't have any problems as well.... :-?

PranKe01
3 Jan 2010, 8:24 AM
Ah - great :) That fixed it ;)

body {
-webkit-user-select: none;
}
The code above does it. Here a screenshot: (I enlarged the grid a bit)
http://imgur.com/zqaC0.jpg

PranKe01
6 Jan 2010, 4:03 AM
Oh no :( Now there seems to be another problem :-/
http://imgur.com/2t04W.jpg
The page number is marked when double clicking a row... I tried following:


.x-panel-body{
-webkit-user-drag: none;
-webkit-user-modify: read-only;
-webkit-user-select: none;
}
Only setting the css to the table body - but that didn't solved the problem.

I'm wondering that this bug doesn't appear in Firefox, because it also uses webkit?!

PranKe01
8 Jan 2010, 6:36 AM
No workaround for that problem?

Maybe there is a property to set the textfield where the page number can be typed in to a "view only" field. The idea is to disable the function to type in a page number there - because then it can not be selected. But I didn't find a property for that :-/

Any hints?

PranKe01
6 Feb 2010, 9:57 AM
*push* :)

mystix
7 Feb 2010, 6:18 AM
it's actually much simpler than all that.

ext-all.css already contains the class x-unselectable.
all that's missing from the grid is that class in the grid template.

try this grid config as a workaround:


new Ext.grid.GridPanel({
viewConfig: {
templates: {
master: new Ext.Template(
'<div class="x-grid3 x-unselectable" hidefocus="true">',
'<div class="x-grid3-viewport">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
'</div>',
'<div class="x-grid3-resize-marker"> </div>',
'<div class="x-grid3-resize-proxy"> </div>',
'</div>'
)
}
},

// ... ... other grid configs ... ...
});


or a more permanent fix would be:


Ext.override(Ext.grid.GridView, {
initTemplates : function(){
var ts = this.templates || {};
if(!ts.master){
ts.master = new Ext.Template(
'<div class="x-grid3 x-unselectable" hidefocus="true">',
'<div class="x-grid3-viewport">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
'</div>',
'<div class="x-grid3-resize-marker"> </div>',
'<div class="x-grid3-resize-proxy"> </div>',
'</div>'
);
}

if(!ts.header){
ts.header = new Ext.Template(
'<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
'</table>'
);
}

if(!ts.hcell){
ts.hcell = new Ext.Template(
'<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id} {css}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
'{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
'</div></td>'
);
}

if(!ts.body){
ts.body = new Ext.Template('{rows}');
}

if(!ts.row){
ts.row = new Ext.Template(
'<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<tbody><tr>{cells}</tr>',
(this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),
'</tbody></table></div>'
);
}

if(!ts.cell){
ts.cell = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>',
'</td>'
);
}

for(var k in ts){
var t = ts[k];
if(t && Ext.isFunction(t.compile) && !t.compiled){
t.disableFormats = true;
t.compile();
}
}

this.templates = ts;
this.colRe = new RegExp('x-grid3-td-([^\\s]+)', '');
}
});



note: this should also prevent the problem paging grid problem you're seeing.

p.s. you might want to report this as a bug if you feel it should be rectified.

PranKe01
7 Feb 2010, 6:47 AM
Hi,

I tried out this class. You're right - the pagebrowser isn't selected anymore. That's okay, but now a user can't type in a number in the pagebrowser...

mystix
7 Feb 2010, 6:57 AM
are you sure?

the toolbar sits in a separate <div> from the gridview, so it shouldn't be affected by that class.

anyhoos, i've moved the x-unselectable class down to the grid-viewport <div> instead.

try the revised code above and let me know how it turns out for you.


note: i tried this using the 3.1.1-rc paging grid example:
http://www.extjs.com/deploy/ext-3.1.1-rc/examples/grid/paging.html

PranKe01
7 Feb 2010, 7:12 AM
When applying the unselectable class to the viewport, the same error occurs (the textfield will be selected).
Again, this erros occurs in Adobe Air which uses WebKit. For now I use this style:

.x-tbar-page-number {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select:ignore;
}

With this code it is not selectable.

mystix
7 Feb 2010, 7:44 AM
changed the code back to the original -- i'm pretty sure it's correct to begin with :-?

is there a public site or something where i can see this bug in action?
i'm unconvinced the "pagebrowser" textfield is affected. you can PM me if the site isn't public.

PranKe01
7 Feb 2010, 9:06 AM
I don't got a page for you, because I am working with Adobe Air. I would give you the project, but it works with web services so you would need a login to see the problem.

Maybe it's an Adobe Air problem? When I look into the code of this page (http://www.extjs.com/deploy/ext-3.1.1-rc/examples/grid/paging.html) I can't find a x-unselectable class in the grid...

mystix
7 Feb 2010, 9:18 AM
I don't got a page for you, because I am working with Adobe Air. I would give you the project, but it works with web services so you would need a login to see the problem.

Maybe it's an Adobe Air problem? When I look into the code of this page (http://www.extjs.com/deploy/ext-3.1.1-rc/examples/grid/paging.html) I can't find a x-unselectable class in the grid...

the page i referenced is just the paging grid example from the 3.1.1 release candidate.

you'll need to run the overrides i provided on a local installation -- which you've done -- but i can't see why the class added to the x-grid3 <div> affects the <input> field in the paging toolbar... :-?

very strange...

PranKe01
7 Feb 2010, 9:32 AM
Well, it does not affect the paging toolbar! That's the problem. When the grid-3 div got the x-unselectable class applied, the text field of the toolbar is still marked when I dblclick on a row of the grid.
The only way to avoid this, is to put the x-unselectable class to the toolbar...

mystix
7 Feb 2010, 10:28 AM
eureka. i finally got what you were saying. :)

yes, x-unselectable needs to go on the paging toolbar itself in addition to the x-grid3 <div>.

PranKe01
7 Feb 2010, 11:21 AM
It doesn't work :-?
When I set x-unselectable to the toolbar, I can't select the pagenumber in the text field (because it's unselectable :) ).

For now I use following styles:

body {
-webkit-user-drag: none;
-webkit-user-modify: read-only;
-webkit-user-select: none;
}
.x-tbar-page-number {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select:ignore;
}

The body class prevents the ugly line from showing in the table, and the x-tbar-page-number prevents the page number from being selected, when I dbl click on a table row. The bad thing about that is, that I can't select the page number anymore, even when I click in the text field.

Maybe it gets fixed someday, so it works in Adobe Air...
Thank you for your help!

mystix
7 Feb 2010, 11:57 AM
remove that body{} rule -- it's setting -webkit-user-select:none; on the entire html document!

you should only need the x-unselectable class on the x-grid3 <div>, along with your x-tbar-page-number rule override (in fact, only the -webkit-user-select:ignore; bit in that rule).


[edit]
i'll need to get a test environment setup. i've been trudging along mostly based on memory + 1 quick test in firebug...

PranKe01
8 Feb 2010, 12:04 AM
No, that would not work. What I can tell is, that FireFox got another behaviour than Adobe Air and Chrome. The Air problem is reproducable in Chrome! When you set the x-unselectable to the x-grid3 in this page http://www.extjs.com/deploy/dev/examples/grid/xml-grid.html, you will see, that when dbl clicking on a row, the row becomes a nasty "select-line".
To avoid this, I added the body-style. I think, when you create a paging-grid and show it with Chrome, you will see the same problems, like I do in Adobe Air ;)

mystix
8 Feb 2010, 8:38 AM
finally got down to solving this.

ignore the code i posted earlier.

all that was required was the following css overrides:


.ext-webkit .x-grid-panel .x-panel-bwrap{-webkit-user-select:none;}
.ext-webkit .x-tbar-page-number{-webkit-user-select:ignore;}


tested against the Paging Grid example in the following browsers:

Chrome 4.x (WinXP SP3)
Chrome 5.x (OSX)
Safari 4.0.4 (WinXP & OSX)
Fx3.6 (WinXP & OSX)



i advised against setting that css rule on the <body> element because it affects every single Component in webkit browsers.

PranKe01
9 Feb 2010, 4:27 AM
Thank you for your help, but that still doesn't work like expected :(
When setting the tbar-pgnr style, the pagenumber still gets selected when dblclk on a row. And when using the gridpanel style, it works in the paginggrid, but not in grids I create in a tabpanel like this:

var ds = new Ext.data.JsonStore({
autoLoad: true,
autoDestroy: true,
autoSave: false,
data: data,
root: 'root',
idProperty: 'ID',
fields: fields,
sortInfo: {
field: 'ID',
direction: 'DESC'
}
});

var selModel = new Ext.grid.RowSelectionModel({
singleSelect:true
});

var grid = new Ext.grid.GridPanel({
layout: 'fit',
el: renderdiv,
ds: ds,
cm: colModel,
sm: selModel,
border: false,
columnLines: true,
viewConfig:{
forceFit: true
}
});

grid.on('rowdblclick', GridDblClickRow, this);
grid.on('rowcontextmenu', GridRightClickRow, this);
grid.render();

In this grid a selection appears at the bottom of the whole grid :-? But I agree with you, that it's not a good solution to put it in the body. But when I set the style to the x-grid-panel, it does not work oO

mystix
9 Feb 2010, 8:35 AM
When setting the tbar-pgnr style, the pagenumber still gets selected when dblclk on a row.

that's not possible (or so i strongly believe)... try the following test case:

add the style (in red below) to the <official ext-3.1.1 download>/examples/grid/paging.html example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style>
/* webkit gridpanel css overrides */
.ext-webkit .x-grid-panel .x-panel-bwrap{-webkit-user-select:none;}
.ext-webkit .x-tbar-page-number{-webkit-user-select:ignore;}
</style>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="paging.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>Paging Grid Example</h1>
<p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain
remote data (from the Ext forums).</p>
<p>Note that the js is not minified so it is readable. See <a href="paging.js">paging.js</a>.</p>

<div id="topic-grid"></div>

</body>
</html>

and comment out the disableRowSelect config in <official ext-3.1.1 download>/examples/grid/paging.js (so rows are selectable by double-clicking):


var grid = new Ext.grid.GridPanel({
width:700,
height:500,
title:'ExtJS.com - Browse Forums',
store: store,
trackMouseOver:false,
// disableSelection:true,
loadMask: true,

// ... [ SNIP ] ...
});

that's all that's required!
as mentioned above, i tested this successfully against webkit browsers, so i'm really not sure how / why you're seeing otherwise. :-?





And when using the gridpanel style, it works in the paginggrid, but not in grids I create in a tabpanel like this:

also can't reproduce this. drop the following test case into <official ext-3.1.1 download>/examples/grid/test.html:


<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style>
/* webkit gridpanel css overrides */
.ext-webkit .x-grid-panel .x-panel-bwrap{-webkit-user-select:none;}
.ext-webkit .x-tbar-page-number{-webkit-user-select:ignore;}
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script>
Ext.onReady(function(){
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

new Ext.TabPanel({
activeTab: 0,
renderTo: document.body,
height: 350,
width: 600,

items: {
xtype: 'grid',
title: 'Some Grid',
store: {
xtype: 'arraystore',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am']
]
},
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company'
}
});
});
</script>
</head>
<body>
</body>
</html>

PranKe01
9 Feb 2010, 9:37 AM
Hi,

I tried it out on Adobe Air and it worked :-? But in my project, it does not :s

I think I need to take a deeper look into my project, to find the problem.

Anyway, thank you! Would be great, if this CSS-Bugfix could be put into the 3.1.1 release ;)

mystix
9 Feb 2010, 9:58 AM
if you could file a new bug report in the 3.x Bugs forum with a link back to this thread, that would help :)

jayrobinson
23 Feb 2010, 3:05 PM
A ticket was opened (Ticket #544)[http://www.extjs.com/forum/showthread.php?t=91678] and is now fixed.

Committed to 3.1.x and 3.2.x using @Mystix's suggestion.