Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Slider Item Display issues

1 Answer 143 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 04 Jun 2013, 03:20 PM
RadSliderProblem.gif
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);
}

1 Answer, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 07 Jun 2013, 02:43 PM
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.
Tags
Slider
Asked by
Brian
Top achievements
Rank 1
Answers by
Slav
Telerik team
Share this question
or