PDA

View Full Version : remove border in selected grid cell with cls and css



juanbill
15 Feb 2015, 9:59 PM
Hi:

I have a tree panel grid and there is a border of 1 px which I want to remove/change.

The rule that shows up on the inspector is



.x-grid-item-focused .x-grid-cell-inner::before
content: "";
position: absolute;
z-index: -1;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
border: 1px solid #53855f;



I've tried


.my_grid .x-grid-item-focused:before{
border: 1px solid #293134 !important;
}

.my_grid .x-grid-item-focused{
border: 1px solid #293134 !important;
}


.my_grid .x-grid-cell-inner{
border: 0px !important;
}


.my_grid .x-grid-item-focused .x-grid-cell-inner{
border: 0px !important;
}

.my_grid .x-grid-item-focused .x-grid-cell-inner:before{
border: 0px !important;
}

.my_grid .x-grid-item-focused{
border: 0px !important;
}



and all doesn't seem to work

I can manipulate other parts such as



.my_grid .x-grid-item-focused{
background-color: red !important;
}


Any ideas?

Thanks
J.

juanbill
16 Feb 2015, 2:18 PM
Hi:

found this thread and it had my answer.




/*Remove dotted borders from cells*/
.x-grid-item-focused .x-grid-cell-inner:before
{
display: none;
}



Thanks

jvandemerwe
20 Apr 2015, 12:44 AM
In the folder 'packages\<yourtemplate>' of your application.
Create folder 'view/Table.scss' and add to this file:


$grid-row-cell-focus-border-width : 0px;

Sencha CMD will nicely pick it up and remove the border on a selected grid/tree column.

DineshGudikandula
17 Jun 2015, 11:20 PM
Code :

$grid-row-cell-focus-border-width : 0px;

Best solution for border remove... It is working fine.

jvandemerwe
18 Jun 2015, 2:41 AM
That's what I said :-?.


Code :

$grid-row-cell-focus-border-width : 0px;

Best solution for border remove... It is working fine.