Rank 1
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 + 'px';
}
}
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 Answers, 1 is accepted
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.
Rank 1
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