I would like to add a box shadow to the selected row in a grid, which also uses the group's feature. Initially I have applied a box shadow to the selected row's table
element:
.x-grid-item-selected {box-shadow: 0 0 6px 2px RGB (119, 119, 119) Inset; }
Unfortunately, the table element in the first row of a group also has a group heading, which gave me the result when I selected the first line in a group:
In addition, The element of the code> tr grid line ( Each cell (<.> .x-grid-item-selected.x-grid-cell .x-grid-row
) because the chrome box does not support shadows tr
) obviously does not give me the desired look:
Here's how I actually see the selected row ( Just for completeness):
In ExtJes 4 I was able to complete it using the Rowdrap facility which was removed with ExtJs5 Or was it.
I really appreciate it if someone can give me something to help with this!
Here's a fiddle to play with:
Thanks & amp; Best regards
P .: I have also asked about this question
With the suggestion that I was able to find a suitable solution using linear-gradient
instead of using the box shadow
Something looks like this:
.x-grid-item-selected .x-grid-cell {background: linear-shield (top, RGB (119, 119, 119), transparent 6px) , Linear-shield (below, RGB (119, 119, 119), transparent 6px); // browser-specific prefix version ...} .x-grid-item-selected .x-grid-cell: first-child {background: linear-shield (top, RGB (119, 119, 119), transparent 6px) Linear-gradient (RGB below (119, 119, 119), transparent 6px), linear-shield (left, RGB (119, 119, 119), transparent 6px); // browser-specific prefix version ...} .x-grid-item-selected .x-grid-cell: last-child {background: linear-shield (top, RGB (119, 119, 119), transparent 6px), Linear-shield (RGB below (119, 119, 119), transparent 6px), linear-gradient (right, RGB (119, 119, 119), transparent 6px); // browser-specific prefix version ...}
Since it's still a bit cumbersome, I really appreciate any more input to solve it in a more "elegant" way I do
Working here is Bela:
Thanks & amp; Best regards
No comments:
Post a Comment