Default Skin - Rounded Corners

2 posts, 0 answers
  1. Ryan Means
    Ryan Means avatar
    32 posts
    Member since:
    Dec 2006

    Posted 01 Jul 2009 Link to this post

    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?
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 03 Jul 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top