[Solved] rcbArrowCellRight - how to make click work on larger button?

[Adam]

I am not sure I did the styling properly, but I was able to get the 35px image to appear for the arrow in the dropdown. Unfortunately, the clickable area is still the original area. If I click about where the arrow is, nothing happens.

I know this is because the image is really the background image, and not a button, but what is the proper way to make that whole cell react to the mouse click?

div.RadComboBox
{
 border-style:outset;
 border-color:#bbd1b1;
}

div.RadComboBox td.rcbArrowCell
{
    min-width:35px;
}

div.RadComboBox td.rcbArrowCellRight {
    background: url('/images/app/upload_arrow.png') no-repeat !important;
    width:35px;
}

div.RadComboBox  .rcbInput
{
    font-size:14px;
    font-family:Helvetica Neue, Arial;
    font-weight:bold;
    background:#ffffff;
    color:Red;
}

[Simon]

Hi Adam,

This happens because you are enlarging the <td> element whereas the <a> inside it remains smaller and it is the actual clickable element.

You need to enlarge the <a> element as well with the following CSS rule:

div.RadComboBox td.rcbArrowCellRight a
{
    width: 35px;
}

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.