Default Skin - Rounded Corners

[Ryan Means]

Would it be possible for you to make the appearance of the listbox have the same rounded corner appearance as the combobox when using the "Default" skin?

[Kamen Bundev]

Hi Ryan,

By default RadListBox has rounded corners only on its buttons. Unfotunately if use images to make rounded corners, we will need additional 4 elements for each element we want to put rounded corners on and that is too much if we want rounded corners on every item.  However with some CSS (and VML in IE) we can get some rounded corners without using additional images. To achieve this, add this CSS to your page:
<style type="text/css">
    v\:roundrect
    {
        color: #FFF;
        display: inline-block;
        background-color: #FFF;
        position: absolute;
        z-index: 0;
       
        /* IE-specific */
        behavior:url(#default#VML);
        /background-color:transparent;
    }
   
    .RadListBox .rlbGroup
    {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    * html .RadListBox .rlbGroup
    {
        visibility: hidden;
    }       
    .RadListBox .rlbItem
    {
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
    }
</style>

And this javascript just after the RadScriptManager:
<script type="text/javascript">
    var $ = $telerik.$;

    function addRoundedBordersIE(el) {
        var $el = $(el);
        var borderRadius = $el.css('-moz-border-radius');
        if ($telerik.isIE6)
            borderRadius = $el.css('moz-border-radius');

        if (borderRadius) {
            var pheight = Math.ceil(parseInt(borderRadius) / Math.min($el.width(), $el.height()) * 100);
            var halfPHeight = Math.ceil(pheight / 2);
            var list = $('.rlbList', el);

            var container = $('<div></div>');
            container[0].style.cssText = el.style.cssText;
            container[0].style.bottom = el.style.bottom;
           
            container.css('width', $el.outerWidth());
            container.css('height', $el.outerHeight() + pheight);
            $('.rlbButtonAreaBottom')[0].style.bottom = 0;
           
            var roundedRect = $('<v:roundrect></v:roundrect>');
            roundedRect[0].style.cssText = el.style.cssText;
            roundedRect.css('width', $el.outerWidth());
            roundedRect.css('height', $el.outerHeight() + pheight);
            roundedRect.css('overflow', 'visible');

            roundedRect.attr('arcsize', pheight + '%');
            roundedRect.attr('fillcolor', $el.css('background-color'));
            roundedRect.attr('strokecolor', $el.css('border-top-color'));
            if ($el.parent().hasClass('RadListBoxButtonAreaTop'))
                roundedRect.css('bottom', 0);
            else
                roundedRect.css('top', 0);
            roundedRect.css('left', 0);

            var cssText = 'border: 0; background: none; position: absolute; width: '+ (parseInt(container[0].currentStyle.width,10) - pheight) + 'px !important; height: ' + (parseInt(container[0].currentStyle.height,10) - pheight) + 'px !important;';
            el.style.cssText = cssText;
            $el.css('margin', (halfPHeight+1) + 'px 0 0 ' + (halfPHeight+1) + 'px');
            if ($el.css('overflow') == 'visible')
                $el.css('overflow', 'hidden');
           
            if ($el.parent().hasClass('RadListBoxButtonAreaBottom'))
                $el.parent().prepend(container);
            else
                $el.parent().append(container);
            container.append(roundedRect);
            roundedRect.append($el);
           
        }
    }

    function pageLoad() {
        if ($telerik.isIE) {
            if (!document.namespaces['v'])
                document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');

            // We have to stop _preInitialize in IE6 or it gets resized back.                   
            if ($telerik.isIE6)
                Telerik.Web.UI.RadListBox._preInitialize = function(elementId, scrollPositon) {};

            $('.rlbGroup').each(function () {
                addRoundedBordersIE(this);
            });
        }
        $('.rlbGroup').each(function () {
            this.style.visibility = 'visible';
        });
    }
</script>

This should give you rounded corners on rlbGroup in IE, on rlbGroup and every rlbItem in FF/WebKit and none in Opera.

Sincerely yours,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.