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:
CSS:
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>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
);
}