[OPEN] [#812] GridPanel Grouping cosmetic issue

  1. #1

    [OPEN] [#812] GridPanel Grouping cosmetic issue


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

    Please, use the example to reproduce it:


    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:

    Click image for larger version. 

Name:	grouping-cosmetic-problem.png 
Views:	72 
Size:	53.8 KB 
ID:	24030

    Click image for larger version. 

Name:	grouping-cosmetic-problem2.png 
Views:	65 
Size:	57.1 KB 
ID:	24031

    Thank you,

    Last edited by Daniil; Jun 25, 2015 at 10:59 AM. Reason: [OPEN] [#812]
  2. #2
    Hi @Matt,

    Apologize for the delay in answering.

    Agree, a small but quite annoying issue. Logged in GitHub.

    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.
        .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;
  3. #3
    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,

Similar Threads

  1. [CLOSED] TextField validation - cosmetic issue
    By matt in forum 3.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 15, 2015, 1:57 PM
  2. [CLOSED] GridPanel with grouping and expand/collapse issue
    By ATLAS in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 12, 2014, 4:05 PM
  3. [CLOSED] Cosmetic issue :-)
    By xtoolz in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 23, 2013, 1:11 PM
  4. Issue with GridPanel grouping Column
    By rishu in forum 2.x Help
    Replies: 0
    Last Post: Jun 11, 2013, 12:19 PM
  5. GridPanel grouping issue
    By milenios in forum 2.x Help
    Replies: 2
    Last Post: Aug 07, 2012, 7:58 PM

Tags for this Thread

Posting Permissions