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

    Goal:
    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.

    Implementation:
    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:

    function

    applyVerticalSliderFix(sliderId) 
    {
       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); 
          label.style.top = topOffset + 'p
    x'
       }
    }

     

     

    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.

    Problem:
    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
    Admin
    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); 
                label.style.top = 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"
        <title></title
        <style type="text/css"
            .CenterItems .rslVertical .rslItem 
            { 
                line-height: 70px; 
            } 
            .CenterItems .rslVertical .rslItem span 
            { 
                vertical-align: middle; 
            } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <telerik:RadSlider ID="RadSlider1" runat="server" Orientation="Vertical" ItemType="Item" 
            TrackPosition="Center" Width="60px" CssClass="CenterItems" Height="400px"
            <Items> 
                <telerik:RadSliderItem Text="Item" /> 
                <telerik:RadSliderItem Text="Item" /> 
                <telerik:RadSliderItem Text="Item" /> 
                <telerik:RadSliderItem Text="Item" /> 
                <telerik:RadSliderItem Text="Item" /> 
            </Items> 
        </telerik:RadSlider> 
        </form> 
    </body> 


    Kind regards,
    Tsvetie
    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
  4. 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,
    Elmar
Back to Top