This is a migrated thread and some comments may be shown as answers.

Positioning text using Item type

4 Answers 49 Views
Slider
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 24 Apr 2010, 03:25 AM
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.)

4 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 27 Apr 2010, 02:14 PM
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.
0
Robert Lampe
Top achievements
Rank 1
answered on 26 May 2010, 08:55 AM
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> 
0
Bozhidar
Telerik team
answered on 26 May 2010, 04:14 PM
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.
0
Robert Lampe
Top achievements
Rank 1
answered on 31 May 2010, 07:35 AM
Thank you! It worked.
Tags
Slider
Asked by
James
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Robert Lampe
Top achievements
Rank 1
Share this question
or