PDA

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



HansWapenaar
Feb 04, 2015, 10:58 AM
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:
http://examples.ext.net/#/GridPanel/Selection_Models/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
Feb 04, 2015, 4:52 PM
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?51971&p=238821&viewfull=1#post238821

You should be able to find workarounds in these threads.

HansWapenaar
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,


Hans