Slider Item Display issues

2 posts, 0 answers
  1. Brian
    Brian avatar
    13 posts
    Member since:
    May 2013

    Posted 04 Jun 2013 Link to this post

    I am attempting to use a rad slider for one of my projects.  The text for the items is in a bad location, the font is black, and the last one goes on the next line (see attached image).  I don't think I am doing anything fancy that would cause this issue.  I was going to attach a sample project, but the file type ZIP is not allowed.  It will be a little long due to the style sheet, but the code is below (nothing in my code behind, so it is not included).  Any help would be greatly appreciated!

    ASPX:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadWebTest.aspx.cs" Inherits="RadWebTest.RadWebTest" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <link href="Slider.SST_Touch.css" rel="stylesheet" type="text/css" />
    </head>
    <body style="background-color: #2872E7">
        <script type="text/javascript">
            function OnClientLoaded() {
                window.setTimeout('ResizeRadSlider()', 0);
            }
     
            function ResizeRadSlider() {
                var slider = $find('<%= RadLengthSlider.ClientID %>');
                var sliderWrapperElement = $get('RadSliderWrapper_' + slider.get_id());
                var divElement = $get('RadLengthSliderDiv');
     
                // Hide the slider so that you can obtain the correct size of the parent element.    
                sliderWrapperElement.style.display = 'none';
                var newWidth = divElement.offsetWidth - 50;
                sliderWrapperElement.style.display = '';
                slider.set_width(newWidth);
                // If you are using a version which earlier than the Q3 2008 SP2 version of RadControls  
                // you should also call the repaint() method when setting the size. This is fixed and it is not needed  
                // in the mentioned and later versions 
                // slider.repaint();    
            }
     
            window.onresize = ResizeRadSlider;
        </script>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
        <div>
                                            <div id="RadLengthSliderDiv">
                                                <telerik:RadSlider ID="RadLengthSlider" runat="server" EnableDragRange="True" MaximumValue="120" MinimumValue="36"
                                                    SmallChange="12" LargeChange="12" IsSelectionRangeEnabled="true" ItemType="Tick"
                                                    SelectionEnd="120" SelectionStart="36" Skin="SST_Touch"   
                                                    ShowDecreaseHandle="False" ShowIncreaseHandle="False" EnableEmbeddedSkins="False" ThumbsInteractionMode="Push"
                                                    TrackPosition="Center" />
                                            </div>
        </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    </html>

    CSS:
    .RadSlider_SST_Touch {
        padding-top: 15px;
        padding-bottom: 15px;
    }
     
    .RadSlider_SST_Touch .rslTrack {
        border-color: #4f4f4f;
    }
     
    .RadSlider_SST_Touch div.rslTop a.rslDraghandle {
        background-image: url('Slider/DragHandleDown.png');
    }
     
    .RadSlider_SST_Touch div.rslHorizontal a.rslHandle {
        width: 28px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #4f4f4f;
        border-radius: 45px;
        background-image: url('Common/radActionsSprite.png');
        background-color: #212121;
    }
     
    .RadSlider_SST_Touch div.rslHorizontal a.rslHandle:hover {
        background-color: #d9d9d9;
        border: white;
    }
         
    .RadSlider_SST_Touch div.rslHorizontal a.rslHandle:active,
    .RadSlider_SST_Touch div.rslHorizontal a.rslHandle:focus{
        background-color:#cccccc;
        border:1px solid #cccccc
    }
     
    .RadSlider_SST_Touch div.rslHorizontal a.rslDecrease,
    .RadSlider_SST_Touch div.rslHorizontal a.rslDecrease:hover,
    .RadSlider_SST_Touch div.rslHorizontal a.rslDecrease:active,
    .RadSlider_SST_Touch div.rslHorizontal a.rslDecrease:focus{
        margin:-3px 0 0 -15px;
        background-position:-111px -111px
    }
     
    .RadSlider_SST_Touch div.rslHorizontal a.rslIncrease,
    .RadSlider_SST_Touch div.rslHorizontal a.rslIncrease:hover,
    .RadSlider_SST_Touch div.rslHorizontal a.rslIncrease:active,
    .RadSlider_SST_Touch div.rslHorizontal a.rslIncrease:focus{
        margin:-3px -4px 0 0;
        background-position:-111px -161px
    }
     
    .RadSlider_SST_Touch div.rslHorizontal a.rslDraghandle{
        width:23px;
        height:23px;
        border-radius:45px;
        background-image:none;
        border:2px solid #000000;
        background-color:#d9d9d9;
        top:-2px
    }
     
    .RadSlider_SST_Touch div.rslHorizontal a.rslDraghandle:hover{
        width:22px;
        height:22px;
        border:3px solid #000000;
        background-color:#d9d9d9
    }
     
    .RadSlider_SST_Touch div.rslHorizontal a.rslDraghandle:active,
    .RadSlider_SST_Touch div.rslHorizontal a.rslDraghandle:focus{
        width:22px;
        height:22px;
        border:3px solid #d9d9d9;
        background-color:#000000
    }
     
    .RadSlider_SST_Touch div.rslHorizontal div.rslTrack{
        height:9px;
        line-height:9px;
        background-color:#d9d9d9;
        border:0
    }
     
    .RadSlider_SST_Touch div.rslHorizontal div.rslSelectedregion{
        height:9px;
        line-height:9px;
        background-color:#00bff4
    }
     
    .RadSlider_SST_Touch div.rslHorizontal .rslItem{
        background-image:url('Slider/ItemHorizontalBgr.png');
        color: #ffffff;
    }
     
    .RadSlider_SST_Touch div.rslHorizontal.rslMiddle .rslHandle{
        margin-top:-15px
    }
     
    .RadSlider_SST_Touch div.rslHorizontal li.rslItem span{
        display:inline-block;
        zoom:1;
        *display:inline;
        font-size:13px;
        color: #ffffff;
    }
     
    .RadSlider_SST_Touch div.rslHorizontal.rslMiddle div.rslTrack{
        margin-top:-5px
    }
     
    .RadSlider_SST_Touch div.rslVertical a.rslHandle{
        width:28px;
        height:28px;
        line-height:28px;
        border:1px solid #4f4f4f;
        border-radius:45px;
        background-image:url('Common/radActionsSprite.png');
        background-color:#d9d9d9
    }
     
    .RadSlider_SST_Touch div.rslVertical a.rslHandle:hover{
        background-color:#d9d9d9;
        border:#d9d9d9
    }
     
    .RadSlider_SST_Touch div.rslVertical a.rslHandle:active,
    .RadSlider_SST_Touch div.rslVertical a.rslHandle:focus{
        background-color:#d9d9d9;
        border:1px solid #cccccc
    }
     
    .RadSlider_SST_Touch div.rslVertical a.rslDecrease,
    .RadSlider_SST_Touch div.rslVertical a.rslDecrease:hover,
    .RadSlider_SST_Touch div.rslVertical a.rslDecrease:active,
    .RadSlider_SST_Touch div.rslVertical a.rslDecrease:focus{
        margin:-16px -3px 0 0;
        background-position:-111px -11px
    }
     
    .RadSlider_SST_Touch div.rslVertical a.rslIncrease,
    .RadSlider_SST_Touch div.rslVertical a.rslIncrease:hover,
    .RadSlider_SST_Touch div.rslVertical a.rslIncrease:active,
    .RadSlider_SST_Touch div.rslVertical a.rslIncrease:focus{
        margin:0 -3px -4px 0;
        background-position:-111px -61px
    }
     
    .RadSlider_SST_Touch div.rslVertical div.rslTrack{
        width:9px;
        background-color:#d9d9d9;
        border:0;
        left:11px
    }
     
    .RadSlider_SST_Touch div.rslVertical.rslRight div.rslTrack{
        left:auto
    }
     
    .RadSlider_SST_Touch div.rslVertical.rslCenter div.rslTrack{
        left:50%;
        margin-left:11px
    }
     
    .RadSlider_SST_Touch div.rslVertical.rslCenter .rslItemsWrapper .rslLargeTick,
    .RadSlider_SST_Touch div.rslVertical.rslCenter .rslItemsWrapper .rslSmallTick{
        margin:0 0 0 15px;
        color: #ffffff;
    }
     
    .RadSlider_SST_Touch div.rslVertical .rslSelectedregion{
        width:9px;
        background-color:#00bff4
    }
     
    .RadSlider_SST_Touch div.rslVertical a.rslDraghandle{
        width:23px;
        height:23px;
        border-radius:45px;
        background-image:none;
        border:2px solid #000000;
        background-color:#d9d9d9;
        left:-1px!important;
        *left:-8px!important
    }
     
    .RadSlider_SST_Touch div.rslVertical a.rslDraghandle:hover{
        width:22px;
        height:22px;
        border:3px solid #000000;
        background-color:#d9d9d9
    }
     
    .RadSlider_SST_Touch div.rslVertical a.rslDraghandle:active,
    .RadSlider_SST_Touch div.rslVertical a.rslDraghandle:focus{
        width:22px;
        height:22px;
        border:3px solid #d9d9d9;
        background-color:#000000
    }
     
    .RadSlider_SST_Touch div.rslVertical .rslItem{
        background-image:url('Slider/ItemVerticalBgr.png');
        color: #ffffff;
    }
     
    .RadSlider_SST_Touch div.rslVertical li.rslItem span{
        font-size:13px;
        padding:1px 3px;
        color: #ffffff;
    }
     
    .RadSlider_SST_Touch .rslLeft a.rslDraghandle{
        background-image:url('Slider/DragVerticalHandleRight.png')
    }
     
    .RadSlider_SST_Touch .rslItem,.RadSlider_SST_Touch .rslLargeTick span{
        color:white
    }
     
    .RadSlider_SST_Touch .rslItemsWrapper .rslItemSelected{
        color:white
    }
     
    .RadSlider_SST_Touch .rslTop .rslSmallTick,
    .RadSlider_SST_Touch .rslBottom .rslSmallTick{
        background-image:url('Slider/SmallChangeHorizontal.png')
    }
     
    .RadSlider_SST_Touch .rslTop .rslLargeTick,
    .RadSlider_SST_Touch .rslBottom .rslLargeTick{
        background-image:url('Slider/LargeChangeHorizontal.png')
    }
     
    .RadSlider_SST_Touch .rslLeft .rslSmallTick,
    .RadSlider_SST_Touch .rslRight .rslSmallTick{
        background-image:url('Slider/SmallChangeVertical.png')
    }
     
    .RadSlider_SST_Touch .rslLeft .rslLargeTick,
    .RadSlider_SST_Touch .rslRight .rslLargeTick{
        background-image:url('Slider/LargelChangeVertical.png')
    }
     
    .RadSlider_SST_Touch .rslMiddle .rslSmallTick{
        background-image:url('Slider/SmallChangeMiddleHorizontal.png')
    }
     
    .RadSlider_SST_Touch .rslLargeTick{
        background-image:url('Slider/LargeChangeMiddleHorizontal.png')
    }
     
    .RadSlider_SST_Touch .rslCenter .rslSmallTick{
        background-image:url('Slider/SmallChangeCenterVertical.png')
    }
     
    .RadSlider_SST_Touch .rslCenter .rslLargeTick{
        background-image:url('Slider/LargelChangeCenterVertical.png')
    }
     
     div.RadSlider_SST_Touch .rslIncrease {
        border-top-color: rgb(79, 79, 79);
    }
     
     div.RadSlider_SST_Touch .rslTrack {
        background-color: rgb(217, 217, 217);
    }
     
     div.RadSlider_SST_Touch .rslSelectedregion {
        background-color: rgb(0, 191, 244);
    }
  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 07 Jun 2013 Link to this post

    Hi Brian,

    There appears to be a problem with the MetroTouch skin, on which your custom skin is based. When the increase/decrease handles are disabled, the last tick is positioned below the slider in Tick and Item ItemType. I have brought this issue to the attention of our developers, although I cannot provide a firm estimate when a fix will be available. You can use the Feedback item of the bug in order to follow its status, vote for it and comment it.

    For the time being you can use the following workaround to position the last tick correctly:
    <script type="text/javascript">
        function SliderLoad(sender, args) {
            $telerik.$(sender.get_element()).find(".rslLargeTickLast").css("width", "23.5px");
        }
    </script>

    This function should be executed when the control is loaded, for example on OnClientLoad.

    I have updated your Telerik points as a token of gratitude for reporting this bug.

    Regards,
    Slav
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top