Vertical Alignment Issues (2009.1)

3 posts, 0 answers
  1. Elmar De Groot
    Elmar De Groot avatar
    3 posts
    Member since:
    Aug 2009

    Posted 18 Aug 2009 Link to this post

    To display the slider control vertically and align the items so that they are visually displayed in the middle (css: vertical-alignment: center) of the item.

    When changing the orientation of the slider control to vertical it is not possible to properly line-up the labels of each item in the slider. To work around this limitation I have created a little bit of javascript which changes the top position of the <span> tags that are used to display the caption for each item as follows:


       var labels = $get(sliderId).getElementsByTagName('span'); 
       for(i=0; i<labels.length; i++) 
          var label = labels[i]; 
          var topOffset = Math.floor((label.parentNode.clientHeight - label.clientHeight) / 2); 
 = topOffset + 'p



    For the above to work I created a new skin where the  ".rslItem SPAN" definition uses a "position:absolute" for the top style attribute to have any effect.

    The above solution seems to work in IE and FF but every now and then throws off the location of the draghandle by a couple of pixels (10 - 15 pixels). In which case the draghandle is no longer properly lined up.

    Any suggestions are much appreciated.
    Regards, Elmar








  2. Tsvetie
    Tsvetie avatar
    1517 posts

    Posted 19 Aug 2009 Link to this post

    Hello Elmar,
    Unfortunately, I was not able to reproduce the problem on my side, but I suppose it is a result of the fact that you set the top CSS property for all SPAN elements in the slider control. However, you should do this only for the SPAN elements that are inside a slider item. In order to so this, you can use the following code:
    function applyVerticalSliderFix(sliderId) 
        var items = $find(sliderId).get_items(); 
        for(var i=0, length=items.length; i<length; i++) 
            var labels = items[i].get_element().getElementsByTagName("span"); 
            for(var j=0; j<labels.length; j++) 
                var label = labels[j]; 
                var topOffset = Math.floor((label.parentNode.clientHeight - label.clientHeight) / 2); 
       = topOffset + 'px'

    However, you can easily center the text of the items vertically without using javascript, by setting the line-height of the LI elements to the same value as their height. You can check the height of the items in the slider using Developer tools (for IE) or Firebug (for FF). For example:
    <head runat="server"
        <style type="text/css"
            .CenterItems .rslVertical .rslItem 
                line-height: 70px; 
            .CenterItems .rslVertical .rslItem span 
                vertical-align: middle; 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        <telerik:RadSlider ID="RadSlider1" runat="server" Orientation="Vertical" ItemType="Item" 
            TrackPosition="Center" Width="60px" CssClass="CenterItems" Height="400px"
                <telerik:RadSliderItem Text="Item" /> 
                <telerik:RadSliderItem Text="Item" /> 
                <telerik:RadSliderItem Text="Item" /> 
                <telerik:RadSliderItem Text="Item" /> 
                <telerik:RadSliderItem Text="Item" /> 

    Kind regards,
    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. Elmar De Groot
    Elmar De Groot avatar
    3 posts
    Member since:
    Aug 2009

    Posted 20 Aug 2009 Link to this post

    Thanks Tsvetie,
    I will look at the changes you suggested in javascript as the second option will not work because the captions displayed for the items consist of multiple lines, therefore the line-height attribute as suggested is not an option for me.

    Kind regards,
Back to Top