Positioning text using Item type

[James]

I'm using a RadSlider with an ItemType="Item" and a TrackPostion="TopLeft".  Unfortunately, the drag handle rests right on top of the text of the item.  Is there an easy was to have the text shifted down so the handle won't cover it up?  See attached image.  Thanks.

(In this example I'm only using numeric values but I may want to do the same thing with text values too.)

[Bozhidar]

Hi James,

This is the default behavior of RadSlider. To fix that and to move down the text, so the handle not to cover it, you should overwrite the CSS in the head of your page:

<style type="text/css">
 .RadSlider .rslTop .rslItemsWrapper
   {
    top: 20px !important;
   }
</style>

By default, the top position is set to zero, so increasing it will move down the text. It is important to use the !important rule to be able to overwrite the basic CSS selector.

This is the original code that I used for that example, where I set ItemType="Item" and a TrackPostion="TopLeft":

<telerik:RadSlider ID="rsl1" runat="server" ItemType="Item" TrackPosition="TopLeft" Width="450" Height="70" AnimationDuration="400">
 <Items>
  <telerik:RadSliderItem Text="Jan" Value="1" />
  <telerik:RadSliderItem Text="Feb" Value="2" />
  <telerik:RadSliderItem Text="Mar" Value="3" />
  <telerik:RadSliderItem Text="Apr" Value="4" />
  <telerik:RadSliderItem Text="May" Value="5" />
  <telerik:RadSliderItem Text="Jun" Value="6" />
  <telerik:RadSliderItem Text="Jul" Value="7" />
  <telerik:RadSliderItem Text="Aug" Value="8" />
  <telerik:RadSliderItem Text="Sep" Value="9" />
  <telerik:RadSliderItem Text="Oct" Value="10" />
  <telerik:RadSliderItem Text="Nov" Value="11" />
  <telerik:RadSliderItem Text="Dec" Value="12" />
 </Items>
</telerik:RadSlider>

I am attaching also a screenshot which demonstrates the final result of my code.

Kind regards,
Bojo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Robert Lampe]

I can confirm that I have the same problem with the default layout

                            <telerik:RadSlider OnClientLoaded="OnClientLoaded" runat="server" TrackPosition="BottomRight"
                                Value="0" ItemType="Item" AutoPostBack="true" ID="FinanceSlider" OnValueChanged="FinanceSlider_ValueChanged"
                                Width="100%">
                                <Items>
                                    <telerik:RadSliderItem Text="Finance Type" Value="0" />
                                    <telerik:RadSliderItem Text="Finance Values" Value="1" />
                                </Items>
                            </telerik:RadSlider>

[Bozhidar]

Hi Robert,

To move the Items to the top, you should put the following CSS code in the head of your document:

.rslItemsWrapper
 {
  top: -15px !important;
 }
.rslItemsWrapper .rslItem
 {
  height: 15px !important;
  line-height: 15px !important;
 }

This will move the Items up, and will increase their height, from 8px to 15px, so the text to is visible.

Please, find attached slider.gif, showing the new Items position.

Best wishes,
Bojo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Robert Lampe]

Thank you! It worked.