View Full Version : Whole Grid gets highlighted with Modal Dialog

23 Dec 2009, 6:11 AM

I created a grid and in grid when user clicks on any row it opens a dialog box having more info related to current row. Dialog is of "Modal" type.
Its working fine with Mozilla and IE but in Chrome whole grid gets highlighted when dialog box opens. (See the attached image).

I just want to confirm if this is due to browser or I can change it through my code?

Please let me know if you need more information.

Krishan Babbar

29 Dec 2009, 4:12 AM
You can resolve this issue by modifying the following css (see the comments with krishan)

-moz-user-select: none;
-khtml-user-select: none;
/* Krishan: Changed to "none" from "ignore" for resolving Chrome Issue */
-webkit-user-select: none;

.x-grid3-resize-proxy {
/* Krishan: Commented for resolving Chrome Issue */
/* width: 1px;
left: 0;
cursor: e-resize;
cursor: col-resize;
position: absolute;
top: 0;
height: 100px;
overflow: hidden;
visibility: hidden;
border: 0 none;
z-index: 7;*/

.x-grid3-focus {
position: absolute;
left: 0;
top: 0;
width: 1px;
/* Krishan: Height changed to "0" from "1" for resolving Chrome Issue */
height: 0px;
line-height: 1px;
font-size: 1px;
-moz-outline: 0 none;
outline: 0 none;
-moz-user-select: text;
-khtml-user-select: text;
-webkit-user-select: ignore;

29 Dec 2009, 10:02 AM
this is only for chrome?

then it is better to prepend always it with the .ext-chrome to only change it for chrome.

better is also to make a patchfile and load it after the normal gxt css - this is better if there later is a new version of the css from gxt ...

something like this (not tested - i just copy your code)

.ext-chrome .x-grid3-row,
.ext-chrome .x-grid3-summary-row{
-webkit-user-select: none;

.ext-chrome .x-grid3-focus {
height: 0px;

i dont understand the block .x-grid3-resize-proxy -> it is needed to remove it or you do this only for testing?

30 Dec 2009, 1:37 AM
Thanks Arno