[CLOSED] RowSelection with line around selected cell

[HansWapenaar]

Hi,

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:
https://examples3.ext.net/#/GridPane...Row_Selection/

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 {
    box-shadow:none;
}

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

Hans Wapenaar

[Daniil]

Hi Hans,

We assume that it has been appeared in ExtJS 5 because Sencha agrees with:
http://outlinenone.com

Personally, I tend to agree as well.

There are related discussions.
http://forums.ext.net/showthread.php?50802
http://forums.ext.net/showthread.php...l=1#post238821

You should be able to find workarounds in these threads.

[HansWapenaar]

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,


Hans