ArrowCell hover style incorrect

4 posts, 0 answers
  1. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 16 Jun 2010 Link to this post

    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.
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 18 Jun 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 18 Jun 2010 Link to this post

    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

     

     

     

  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 18 Jun 2010 Link to this post

    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
Back to Top