RIght hand arrow

[Ben White]

Hi,

I have a request whereby the combo box should not have an error on the select item.

I have managed to find the class

.rcbArrowCellRight

and I can see that this is a table cell (for which there are two, 1 for the text and one for the arrow handle)

I want to get rid of this extra cell as we do not require it - is there any way to do this. If not, could you suggest a better control from the suite to achieve this.

Thanks

[Kalina]

Hi Ben White,

I can suggest you easier approach to hide the arrow image - simply set the ShowToggleImage property of the RadComboBox to "false".

Regards,
Kalina
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.

[Ben White]

Thank you for your response.

This wont entirely solve my situation as the table td cell still takes up space in the document.

I have an example of what I am trying to achieve here: example

From the PDF document, if you look at the "Airport" example. I want the selected item, and the drop down to be exactly the same width.

Hopefully this makes sense now with the example link.

Any ideas?

Thanks.

[Kamen Bundev]

Hello Ben,

You don't need to remove the second cell from there, since it will help you style the right edge of your RadComboBox. Check this article out - it is a tutorial for changing the height of a RadComboBox, but it will give you some insights of how the skins are constructed. In short .rcbInputCell is holding the background under the input element and .rcbArrowCell is holding the background under the arrows. You can derive your skin from one of the embedded ones and change the sprite using an image editing software that supports 8 and 24bit PNGs to look like your design. The rounded hovers in the drop down you can achieve by using a template to add more elements (there is only one for each row currently) or by using border-radiuses but that's a CSS3 property and is not available in the current IE browsers.

Best wishes,
Kamen Bundev
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.

[Ben White]

Ok thanks for that.

I am having a run through the tutorial and making some sense of it.

Last question: How do I extend the width of the arrow cell, I can only see options to exntend the height.

I am trying to overide this in the css but I am unable to find the correct selector?

Thanks

[Kamen Bundev]

Hello Ben,

The width is specified in the base stylesheet and if you don't want to make it external, better override it in your CSS with these rules:
div.RadComboBox table td.rcbArrowCell,
div.RadComboBox .rcbArrowCell a { width: 18px; }

div.RadComboBox .rcbReadOnly td.rcbArrowCell,
div.RadComboBox .rcbReadOnly td.rcbArrowCell a { width: 16px; }

div.RadComboBox table td.rcbArrowCellHidden,
div.RadComboBox table td.rcbArrowCellHidden a,
div.RadComboBox .rcbReadOnly td.rcbArrowCellHidden,
div.RadComboBox .rcbReadOnly td.rcbArrowCellHidden a { width: 3px; }
The first width is for the normal state, the third for the read only state. The last one is for when the arrow is disabled. Let me know if this helps.

Best wishes,
Kamen Bundev
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.