[OPEN] [#812] GridPanel Grouping cosmetic issue

[matt]

Hi,

It is only tiny cosmetic issue but would be nice to fix it.

Please, use the example to reproduce it:

https://examples3.ext.net/#/GridPane...oupingSummary/

When first row in the grid is selected (focused) then above first group (it happens only with the first group) header we can see "1 pixel height" selection/focus border line.

See attached pictures:







Thank you,

Matt

[Daniil]

Hi @Matt,

Apologize for the delay in answering.

Agree, a small but quite annoying issue. Logged in GitHub.
https://github.com/extnet/Ext.NET/issues/812

I found out that it happens with the first row of each group, not just the first group.

This is the override that appears to help for four themes: Neptune, NeptuneTouch, Crisp and CrispTouch.

<style>
    .x-theme-crisptouch .x-grid-with-row-lines .x-grid-item:first-child,
    .x-theme-crisp .x-grid-with-row-lines .x-grid-item:first-child,
    .x-theme-neptunetouch .x-grid-with-row-lines .x-grid-item:first-child,
    .x-theme-neptune .x-grid-with-row-lines .x-grid-item:first-child {
        border-top-color: white !important;
    }

    .x-theme-crisptouch .x-grid-with-row-lines .x-grid-item.x-grid-item-selected,
    .x-theme-crisp .x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
        border-color: #cecece;
    }

    .x-theme-crisptouch .x-grid-with-row-lines .x-grid-item.x-grid-item-over,
    .x-theme-crisp .x-grid-with-row-lines .x-grid-item.x-grid-item-over {
        border-color: #cecece;
    }

    .x-theme-neptunetouch .x-grid-with-row-lines .x-grid-item.x-grid-item-selected,
    .x-theme-neptune .x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
        border-color: #ededed;
    }

    .x-theme-neptunetouch .x-grid-with-row-lines .x-grid-item.x-grid-item-over,
    .x-theme-neptune .x-grid-with-row-lines .x-grid-item.x-grid-item-over {
        border-color: #ededed;
    }
</style>

[matt]

The CSS patch works! Thank you.

Based on your patch a I have added the same for Default (Gray) and Blue themes.

.x-grid-with-row-lines .x-grid-item:first-child,
.x-theme-blue .x-grid-with-row-lines .x-grid-item:first-child {
	border-top-color: #ededed !important;	
}

.x-grid-with-row-lines .x-grid-item.x-grid-item-selected,
.x-theme-blue .x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
	border-color: #ededed;
	border-top-style: solid;
}

.x-grid-with-row-lines .x-grid-item.x-grid-item-over,
.x-theme-blue .x-grid-with-row-lines .x-grid-item.x-grid-item-over {
	border-color: #ededed;
}

Best Regards,