View Full Version : [CLOSED] RowSelection with line around selected cell

Feb 04, 2015, 10:58 AM

When you select a row in a GridPanel a line is shown around the cell that is clicked.
You can see it in the rowselection example:

Is there a way to remove this line or box?
I checked the stylesheet but could not find anything that creates the line. I assume it is somewhere in a stylesheet.

There is also a line around selected items in a TabPanel.
I could remove this line by overwriting a stylesheet:

.tabCustom .x-tab-active.x-tab.x-tab-default-top {

Any idea?
Or is there a reason for adding this line? (standards, tablet use, touch functionalities?)

Hans Wapenaar

Feb 04, 2015, 4:52 PM
Hi Hans,

We assume that it has been appeared in ExtJS 5 because Sencha agrees with:

Personally, I tend to agree as well.

There are related discussions.

You should be able to find workarounds in these threads.

Feb 04, 2015, 7:56 PM
Hi Daniil,

Ok, so it's to adapt to web standards.
I will leave the focus-boxes in my website.

To adjust colors of the tabpanel-menus, the gridpanel-rows and their headers I change:

.tabCustom .x-tab-default-top.x-tab-focus.x-tab-active {
box-shadow: 0 1px 0 0 #EAFC85 inset, 0 -1px 0 0 #EAFC85 inset, -1px 0 0 0 #EAFC85 inset, 1px 0 0 0 #EAFC85 inset;

.gridCustom .x-grid-item-focused .x-grid-cell-inner:before {
border: 1px solid #EAFC85;

.gridCustom .x-column-header.x-column-header-focus .x-column-header-inner:before {
border: 1px solid #EAFC85;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;

Thanks for your explanation,