This seems like a rendering engine quirk, as it had been tested and failed to reproduce on WebKit driven browsers (Chrome and Safari for Windows).
Description
When using a deep nested DOM structure, such as the GXT Grid, the default cursor seem to override any other style applied. How to override (or sidestep) this behavior?
Test Case
Steps To Reproduce
(Requires basic knowledge of your favored browser’s developer tools)
- Visit the GXT 2.2.x examples showcase.
- Right-click a cell text value in the grid and click Inspect Element, or hit
F12to open the developer tools and than inspect that element manually. You should be inspecting an element notated as:div.x-grid3-cell-inner.x-grid3-col-name. - In the Styles view, look for a rule matching the following selector:
.x-grid3-row, it should have a single declared property forcursor. Change its value fromdefaulttoauto.
Expected Result
The cursor should be rendered according to the element’s type, e.g. text cursor for text content elements.
Actual Result
On Gecko based browsers, the default cursor appears regardless of the element’s type.
This is a known issue caused by ancestor elements with a declared
tabindexattribute with a value equals or larger than0, and is a reported bug in the Mozilla bug tracker.It can be reproduced by running this simple test case on Gecko browsers (run on WebKit for a reference).
As a workaround, one can ensure all elements up the hierarchy are assigned with a
tabindexvalue of-1, or remove those altogether, thus avoiding entering this block, turning cursor related CSS rules back to their normal behavior.