ExtJS 5 grid with grouping feature: Selected row with box shadow

1
votes

I'd like to add a box shadow to the selected row in a grid which also uses the grouping feature. Initially I just applied the box shadow to the table element of the selected row:

.x-grid-item-selected {
    box-shadow: 0 0 6px 2px rgb(119, 119, 119) inset;
}

Unfortunately, the table element of the first row in a group also contains the group header which gave me this result when I selected the first row in a group:

enter image description here

Also I can't apply the box shadow to the tr element of the grid row (.x-grid-item-selected .x-grid-row) since chrome doesn't support box shadows on tr elements (at least not without setting their display property to block which would break the layout completely).

Applying the box shadow to each cell (.x-grid-item-selected .x-grid-cell) obviously doesn't give me the desired look neither:

enter image description here

Here's how I'd like the selected row to actually look like (just for the sake of completeness):

enter image description here

In ExtJS 4 I was able to accomplish this by using the RowWrap feature which was removed with ExtJS 5.

I'd really appreciate if someone could give me some help with this!

Here's a fiddle to play around with: https://fiddle.sencha.com/#fiddle/jkv

Thanks & best regards

Ps.: I've also asked this question on the Sencha Forums

2
javascripthtmlcssextjsextjs5
Can you do the same thing via a background gradient? Chrome may support that on the TR element, giving you what you asked for. – arthurakay
@arthurakay Directly using the gradient on the tr element didn't work since chrome actually applies those gradients to all cells, but still I was able to find a solution by applying the gradient to every cell and using the :first-child & :last-child pseudo selectors. Thanks a lot for the input! – suamikim

2 Answers

1
votes

With the suggestion of arthurakay who commented above in mind I was able to find a suitable solution by using linear-gradients instead of box shadows which looks something like this:

.x-grid-item-selected .x-grid-cell {
    background:
        linear-gradient(top, rgb(119, 119, 119), transparent 6px),
        linear-gradient(bottom, rgb(119, 119, 119), transparent 6px);

    // Browser specific prefixed versions...
}

.x-grid-item-selected .x-grid-cell:first-child {
    background: 
        linear-gradient(top, rgb(119, 119, 119), transparent 6px),
        linear-gradient(bottom, rgb(119, 119, 119), transparent 6px),
        linear-gradient(left, rgb(119, 119, 119), transparent 6px);

    // Browser specific prefixed versions...
}

.x-grid-item-selected .x-grid-cell:last-child {
    background: 
        linear-gradient(top, rgb(119, 119, 119), transparent 6px),
        linear-gradient(bottom, rgb(119, 119, 119), transparent 6px),
        linear-gradient(right, rgb(119, 119, 119), transparent 6px);

    // Browser specific prefixed versions...
}

Since this is still somewhat cumbersome, I'd really appreciate any more input to solve this in a more "elegant" way.

Here's the working fiddle: https://fiddle.sencha.com/#fiddle/jrh

Thanks & best regards

1
votes

I just found another solution which actually fits my needs even better since the usage of the linear gradient interfered with some other styles (e.g. background image of the first cell depending on content, ...).

This solution uses the pseudo element after:

.x-grid-item-selected .x-grid-row:after {
    content: '';
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0;
    box-shadow: 0 0 6px 2px rgb(119, 119, 119) inset;
}

Working fiddle: https://fiddle.sencha.com/#fiddle/jrm

The only downside of this method is that I have to set a fixed height. Again, I'd really appreciate if someone comes up with an even better way to do this.

Thanks & best regards