ArrowCell hover style incorrect

[Steve]

Hello,

I have a RadComboBox that is being created programmatically, as part of a templated grid pager.  No matter which skin I choose for the combo box, when I hover the mouse pointer over the arrow cell, the arrow cell changes to a white box with a black border, with no arrow image visible within.

I have a feeling that the problem has to do with the background-position of the rcbHovered classes, but I am not that familiar with image sprites and positioning within a sprite.  Obviously, something is getting messed up with the styles, when the combo box is created programmatically, or else when the combo box is embedded within another control (like a RadGrid GridPagerItem).

Does anybody know of a reason why the image would get blanked out when hovering over the arrow cell?

Note, the attached files are screenshots of the grid pager with the RadComboBox, normal, and when the mouse pointer is hovering over the arrow cell.

Thanks for any help.

[Yana]

Hi Steve,

We're not aware of such issue, could you please send us a live url where we can observe it? Thanks in advance

Best wishes,
Yana
the Telerik team

[Steve]

Thanks for the reply.  However, I was able to resolve the problem.

As I indicated before, the RadComboBox was embedded within a templated grid pager.  The grid pager uses a css class that we have created (tso_grid_pager).  Because our paging buttons are implemented as anchors, this css class also has some styles for anchors, as such:

.tso_grid_pager a:link, .tso_grid_pager a:visited

 

 

{

 

 

 

padding:2px 6px;

 

 

 

border:1px solid #9aafe5;

 

 

 

text-decoration:none;

 

 

 

color:#2e6ab1;

 

 

 

margin-right:3px;

 

 

 }

 

 

 

 .tso_grid_pager

 

a:hover, .tso_grid_pager a:active

 

 

 

 

{

 

 

 

border:1px solid #2b66a5;

 

 

 

text-decoration:none;

 

 

 

color:#000;

 

 

 

background:#f7f7f7;

 

 

 }

Since the RadComboBox's arrow cell is also implemented as an anchor, and since it is within the div with css class "tso_grid_pager", it was inheriting the styles associated with the tso_grid_pager's anchors.

I was able to resolve the problem by assigning a new css class to the RadComboBox, and creating a new style to override the previously inherited style:
  

 

 

.tso_grid_pager_dropdown

 

.rcbArrowCell a

 

 

 

 

{

 

 

 

border:none;

 

 

 

background:transparent;

 

 

 }

Hopefully, this will help others that might experience the same problem.
Regards,
Steve

 

 

 

[Yana]

Hi Steve,

I'm glad that you managed to fix the issue. Thank you for sharing the solution.

Best regards,
Yana
the Telerik team