This is a migrated thread and some comments may be shown as answers.

Layout issues when hovering over the header

1 Answer 54 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lex
Top achievements
Rank 1
Lex asked on 17 Mar 2014, 12:39 PM
I've spend a lot of time trying to update the Telerik components that we use, however I'm left with one issue.

When I hover over the header of a grid, the column header correctly changes its background color, however the area where the text is does not correctly color with it, at least not until I hover over the text as well (and in that case, the color of the font for the text changes and it still looks wrong).

Basically the idea is that when you hover over any place in one of the header column, the background color of that header changes, but nothing else should change.

Does anyone have any ideas?

Attached is a screenshot of how it currently looks (incorrect) and how it used to look when we were using the 2008 version of Telerik.

Here is my CSS:

/*global*/
 
.RadGrid_newSkin {
   background: #ffffff;
   color: #000000;
}
 
 
   .RadGrid_newSkin,
   .RadGrid_newSkin * {
      outline-color: #ffffff;
   }
 
.RadGrid_newSkin,
.rgMasterTable,
.rgDetailTable,
.rgGroupPanel table,
.rgEditForm table,
.GridToolTip_newSkin {
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
 
.RadGrid_newSkin,
.rgDetailTable {
   padding-left: 4px;
   padding-right: 4px;
   padding-bottom: 4px;
   padding-top: 4px;
}
 
.rgMasterTable,
.rgDetailTable {
   border-collapse: separate !important;
}
 
.RadGrid_newSkin .rgAdd,
.RadGrid_newSkin .rgRefresh,
.RadGrid_newSkin .rgEdit,
.RadGrid_newSkin .rgDel,
.RadGrid_newSkin .rgFilter,
.RadGrid_newSkin .rgPagePrev,
.RadGrid_newSkin .rgPageNext,
.RadGrid_newSkin .rgPageFirst,
.RadGrid_newSkin .rgPageLast,
.RadGrid_newSkin .rgExpand,
.RadGrid_newSkin .rgCollapse,
.RadGrid_newSkin .rgUpdate,
.RadGrid_newSkin .rgCancel {
   width: 16px;
   height: 16px;
   border: 0;
   padding: 0;
   background-color: transparent;
   background-image: url('Grid/sprite.gif');
   background-repeat: no-repeat;
   vertical-align: middle;
   cursor: pointer;
}
 
.RadGrid_newSkin .rgSortAsc,
.RadGrid_newSkin .rgSortDesc {
   width: 16px;
   height: 8px;
   border: 0;
   padding: 0;
   vertical-align: text-top;
   margin-top: 2px;
   margin-left: -2px;
   cursor: pointer;
   z-index: 100;
}
 
.RadGrid_newSkin .rgSortAsc {
   background: transparent url('Grid/SortAsc.gif') no-repeat;
}
 
.RadGrid_newSkin .rgSortDesc {
   background: transparent url('Grid/SortDesc.gif') no-repeat;
}
 
.GroupPanelItems_newSkin input,
.GridCommandRow_newSkin img,
.GridHeader_newSkin input,
.GridFilterRow_newSkin img,
.GridPager_newSkin img {
   vertical-align: middle;
}
 
/*header*/
 
.RadGrid_Wintethur .rgHeader {
   background: #ffffff url('Grid/sprite.gif') 0 -1283px repeat-x;
}
 
.RadGrid_newSkin .rgHeader,
.RadGrid_newSkin th.rgResizeCol,
.RadGrid_newSkin rgHeaderWrapper {
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   font-weight: bold;
   text-align: left;
   padding: 4px 4px 4px 4px;
   border-right: 2px solid white;
   color: #FFFFFF;
}
 
.rgHeader a {
   font-weight: bold;
}
 
.rgHeaderDiv,
.rgDetailTable .rgResizeCol {
   padding-top: 2px;
   padding-bottom: 4px;
   background-position: 0 -5px;
}
 
.RadGrid_newSkin .rgHeader:hover {
   background-color: #AAAAAA;
   color: #ffffff;
}
 
th.rgHeader,
th.rgHeader a {
   background-color: #666666;
   color: #FFFFFF;
   text-decoration: none;
   cursor: pointer;
}
 
.rgHeaderDiv a {
   width: 100%;
}
 
.RadGrid_newSkin .rgHeaderDiv,
.RadGrid_newSkin .rgHoverRow a, .rgHoverRow {
   background-color: #999999;
   color: #FFFFFF;
   text-decoration: none;
}
 
/*
    This style is used to overwrite the default mouseover css for grids that will only every
    display a single row.
*/
#SingleRowGridContainer div.RadGrid_newSkin .rgHeaderWrapper {
   background-color: #666666;
   color: #FFFFFF;
   text-decoration: none;
   cursor: auto;
}
 
/* End header */
 
/*rows*/
 
.rgRow td,
.rgAltRow td,
.rgEditRow td,
.rgFooter td,
.GridGroupFooter_newSkin td {
   padding-top: 3px;
   padding-bottom: 3px;
   padding-left: 4px;
   padding-right: 4px;
   color: #333333;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
 
.rgRow {
   background-color: #FFFFFF;
}
 
.rgAltRow {
   background-color: #F9F9F9;
}
 
   .rgRow td,
   .rgAltRow td,
   .rgFooter td,
   .rgEditRow td {
      border-top-style: none;
      border-bottom-style: none;
      border-right-style: none;
      border-right-color: White;
      border-right-width: 0px;
      vertical-align: top;
   }
 
   .rgRow a,
   .rgAltRow a,
   .rgFooter a,
   .GridGroupFooter_newSkin a,
   .rgEditRow a,
   tr.rgEditRow,
   tr.rgEditRow a {
      color: #ccd9e2;
   }
 
 
.GridRowOver_newSkin {
   background-color: #ccd9e2;
   background-image: none !important;
}
 
.GridRowOver_newSkin td {
   border-right-style: solid;
   border-right-color: White;
   border-right-width: 0px;
   background-color: #ccd9e2;
}
 
.GridRow_newSkin > td:first-child,
.GridAltRow_newSkin > td:first-child,
.GridFooter_newSkin > td:first-child,
.GridGroupFooter_newSkin > td:first-child {
   border-left-color: #c2d197;
}
 
.rgActiveRow {
   background: #CCD9E2 url('Grid/sprite.gif') 0 -1715px repeat-x;
}
 
td.rgActiveRow {
   border-color: #841d05 #e4660d #841d05 #89250e;
}
 
 
.ActiveRow_newSkin > td:first-child {
   border-left-color: #dd620a;
}
 
.RadGrid_newSkin .rgHoveredRow {
   background: #ccd9e2 !important;
   color: #ccd9e2;
}
 
.SelectedRow_newSkin td,
.SelectedRow_newSkin > td:first-child {
   border-color: #841d05 #e4660d #841d05 #89250e;
}
 
.rgActiveRow a,
.rgSelectedRow a {
   background-color: #ccd9e2 !important;
}
 
.rgEditRow {
   background: #9cb16a;
}
 
   .rgEditRow td {
      border-color: #9cb16a #62703b #9cb16a #bfd090;
   }
 
 
.GridEditRow_newSkin > td:first-child {
   border-left-color: #9cb16a;
}
 
/*sorting, reordering*/
 
 
.GridReorderTop_newSkin,
.GridReorderBottom_newSkin {
   width: 11px !important;
   height: 11px !important;
   margin-left: -5px;
   background: url('Grid/sprite.gif') 0 -899px no-repeat;
}
 
.GridReorderBottom_newSkin {
   background-position: -21px -899px;
}
 
/*footer*/
 
.rgFooterDiv,
.rgFooter,
.GridGroupFooter_newSkin {
   background: transparent;
   color: #313320;
}
 
   .rgFooter td,
   .GridGroupFooter_newSkin td {
      border-top: 0px;
      border-right-color: #c2d197;
   }
 
   .GridGroupFooter_newSkin td {
      border-bottom: 1px solid #9cb16a;
   }
 
/*status*/
 
.rgPager span {
   color: #e4f0c0;
}
 
/*paging*/
 
.rgPager {
   background: #666666;
   line-height: 24px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #FFFFFF;
}
 
td.rgPagerCell {
   padding: 0 10px;
   border-style: none;
}
 
.GridPager_newSkin td td {
   border: 0;
   padding: 1px;
}
 
.rgPager,
.rgPager div span,
.rgPager a,
.rgPager .sliderPagerLabel_newSkin {
   color: #e4f0c0;
}
 
 
.PagerLeft_newSkin {
   float: left;
}
 
 
.PagerRight_newSkin {
   float: right;
}
 
 
.PagerCenter_newSkin {
   text-align: center;
}
 
 
   .PagerCenter_newSkin * {
      vertical-align: middle;
   }
 
 
.RadGrid_newSkin .rgPagePrev {
   background-position: 4px -992px;
}
 
.RadGrid_newSkin .rgPageNext {
   background-position: -20px -992px;
}
 
.RadGrid_newSkin .rgPageFirst {
   background-position: 3px -960px;
}
 
.RadGrid_newSkin .rgPageLast {
   background-position: -19px -960px;
}
 
html body .RadGrid_newSkin input.PagerTextBox {
   padding: 2px 0 2px 3px;
}
 
/*filtering*/
 
.rgFilterRow {
   background: #9cb16a;
}
 
   .rgFilterRow td {
      border-top: 1px solid #b6c988;
      border-bottom: 1px solid #62703b;
      padding: 0.1em 7px 0.2em 11px;
   }
 
.RadGrid_newSkin .rgFilter {
   background-position: 2px -1024px;
}
 
.rgFilterRow input[type="text"] {
   border: 1px solid #78884a;
   background: #f2f8e3;
   font: 11px "segoe ui",arial,sans-serif;
   color: #41442b;
   vertical-align: middle;
}
 
/*grouping*/
 
.rgGroupPanel {
   border-bottom: 1px solid #202f11;
   background: #425335;
   color: #d3e8b1;
}
 
   .rgGroupPanel table td {
      line-height: 1.6em;
   }
 
.RadGrid_newSkin .rgGroupPanel .rgSortAsc {
   background-position: -20px -1679px;
   height: 12px;
}
 
.RadGrid_newSkin .rgGroupPanel .rgSortDesc {
   background-position: 4px -1679px;
   height: 12px;
}
 
.RadGrid_newSkin .rgGroupPanel td {
   border: 1px solid #465938;
   padding: 0 6px;
}
 
   .RadGrid_newSkin .rgGroupPanel td td {
      border: 0;
      padding: 0;
   }
 
.RadGrid_newSkin .rgGroupItem {
   border: 1px solid;
   border-color: #587244 #587244 #577143;
   padding: 3px 0 4px 5px;
   background: #4f6340;
   color: #d3e8b1;
   font-weight: normal;
}
 
.RadGrid_newSkin .rgGroupHeader {
   font-size: 1.1em;
   color: #762100;
}
 
   .RadGrid_newSkin .rgGroupHeader td {
      padding: 0.8em 11px 0.5em 7px;
   }
 
.RadGrid_newSkin .rgExpand {
   background-position: 5px -1054px;
}
 
.RadGrid_newSkin .rgCollapse {
   background-position: -21px -1053px;
}
 
.GroupHeader_newSkin td div {
   top: -0.6em;
}
 
   .GroupHeader_newSkin td div div {
      top: 0;
   }
 
/*editing*/
 
.rgEditFrom {
   border-bottom: 1px solid #62703b;
}
 
.rgEditForm input[type="text"],
.rgEditForm input[type="password"],
.rgEditForm textarea {
   border: 1px solid #78884a;
   background: #f2f8e3;
   font: 11px "segoe ui",arial,sans-serif;
   color: #41442b;
}
 
.RadGrid_newSkin .rgUpdate {
   background-position: 2px -1216px;
}
 
.RadGrid_newSkin .rgCancel {
   background-position: 2px -1248px;
}
 
/*hierarchy*/
 
.rgDetailTable {
   border-right: 0;
}
 
/*command row*/
 
.rgCommandRow table {
   background: #425335;
}
 
.rgCommandRow,
.rgCommandRow a {
   color: #d3e8b1;
   text-decoration: none;
}
 
   .rgCommandRow td {
      border-bottom: 1px solid #202f11;
      padding: 0;
   }
 
.RadGrid_newSkin .rgCommandTable td {
   border-bottom: 0;
}
 
.RadGrid_newSkin .rgCommandTable {
   border: 1px solid #465938;
}
 
.RadGrid_newSkin rgCommandTable td {
   border: 0;
   padding: 0 6px 2px;
}
 
.GridCommandRow_newSkin table td td {
   padding: 1px;
}
 
.RadGrid_newSkin .rgAdd {
   margin-right: 4px;
   background-position: 0 -1091px;
}
 
.RadGrid_newSkin .rgRefresh {
   margin-right: 4px;
   background-position: 0 -1123px;
}
 
.RadGrid_newSkin .rgEdit {
   background-position: 1px -1154px;
}
 
.RadGrid_newSkin .rgDel {
   background-position: 0 -1187px;
}
 
/*multirow select*/
 
.GridRowSelector_newSkin {
   background: #000;
}
 
/*row drag n drop*/
 
.GridItemDropIndicator_newSkin {
   border-top: 1px dashed #78884a;
}
 
/*tooltip*/
 
.GridToolTip_newSkin {
   border: 1px solid #62703b;
   padding: 3px;
   background: #9cb16a;
   color: #41442b;
}
 
/*rtl*/
 
.RadGridRTL_newSkin .GridHeader_newSkin,
.RadGridRTL_newSkin .ResizeHeader_newSkin {
   text-align: right;
}
 
.RadGridRTL_newSkin .GridRow_newSkin td,
.RadGridRTL_newSkin .GridAltRow_newSkin td,
.RadGridRTL_newSkin .GridEditRow_newSkin td,
.RadGridRTL_newSkin .GridFooter_newSkin td,
.RadGridRTL_newSkin .GroupHeader_newSkin td {
   padding-right: 10px;
   padding-left: 6px;
}
 
.RadGridRTL_newSkin .GridHeader_newSkin,
.RadGridRTL_newSkin .ResizeHeader_newSkin,
.RadGridRTL_newSkin .GridFilterRow_newSkin td {
   padding-right: 11px;
   padding-left: 7px;
}
 
.RadGridRTL_newSkin .PagerLeft_newSkin,
.RadGridRTL_newSkin .GridPager_newSkin .radslider {
   float: right;
}
 
.RadGridRTL_newSkin .PagerRight_newSkin {
   float: left;
}

1 Answer, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 20 Mar 2014, 07:49 AM
Hi Lex,

In order to resolve this issue you need to target the <a> element in the headers too.

CSS:
.RadGrid_newSkin .rgHeader:hover,
.RadGrid_newSkin .rgHeader:hover a {
   background-color: #AAAAAA;
   color: #ffffff;
}

Note: please avoid duplicating threads, this will help us better track the issues. You have already addressed the same question here. If you have more question please post them here. Thank you.

Regards,
Venelin
Telerik
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
Tags
Grid
Asked by
Lex
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Share this question
or