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

ArrowCell hover style incorrect

3 Answers 50 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 16 Jun 2010, 06:53 PM
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.

3 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 18 Jun 2010, 08:53 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Steve
Top achievements
Rank 1
answered on 18 Jun 2010, 01:37 PM

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

 

 

 

0
Yana
Telerik team
answered on 18 Jun 2010, 01:53 PM
Hi Steve,

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

Best regards,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
ComboBox
Asked by
Steve
Top achievements
Rank 1
Answers by
Yana
Telerik team
Steve
Top achievements
Rank 1
Share this question
or