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

No Border or Background

3 Answers 261 Views

ComboBox

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

3 Answers, 1 is accepted

Accepted

answered on 02 Mar 2010, 01:14 PM

Hello Tye,

The RadComboBox borders and background are made entirely from images (at least in Q1 2009+), so you can hide the RadComboBox's appearance until you hover by creating an external skin or by using some javascript and the internal skin. Check the javascript solution below:

Create a rule with which to hide the borders and backgrounds:
<style type="text/css">
    div.NoBorder .rcbInputCell,
    div.NoBorder .rcbArrowCell
    {
        background: none;
    }
</style>
Bind the events with which to add and remove the rule:
<script type="text/javascript">
    function pageLoad() {
        $telerik.$('.NoBorder')
            .bind('mouseover', function () {
                $telerik.$(this).removeClass('NoBorder');
            })
            .bind('mouseout', function () {
                if ($telerik.$('.rcbFocused', this).length == 0) {
                    var item = $telerik.$(this);
                    if (!item.hasClass('NoBorder'))
                        item.addClass('NoBorder');
                }
            });
    }
    function onNoBorderBlur(sender) {
        var item = $telerik.$(sender.get_element());
        if (!item.hasClass('NoBorder'))
            item.addClass('NoBorder');
    }
</script>
And finally define your RadComboBox like this:
<telerik:RadComboBox runat="server" Skin="Office2007" CssClass="NoBorder" OnClientBlur="onNoBorderBlur" >

Let me know if this works for you.

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

answered on 02 Mar 2010, 04:13 PM

Thanks for the response Kamen. That was a big help. I ended up tweaking the CSS a bit to get the desired effect:

                    div.NoBorder .rcbInputCell         
            {         
                background: none;         
            }         
            div.NoBorder .rcbArrowCell         
            {         
                background-position: -159px -88px !important;         
            }         
            div.NoBorder.RadComboBox_Office2007 .rcbHovered         
            {         
                border: 1px solid #c6c7d2 !important;         
                background-color: White !important;         
            }         
            div.NoBorder.RadComboBox_Office2007 .rcbFocused         
            {         
                background-color: White !important;         
                border: 1px solid #c6c7d2 !important;         
            }         
                     

The sprite for the combo box had the right arrow, so setting the background-position fixed the arrow problem. So now, when collapsed, the arrow has no background (all you see is the dark-blue arrow), but when hovered, has the orange background that's a part of the Office2007 skin.

Thanks for the help!