Positioning text using Item type

5 posts, 1 answers
  1. James
    James avatar
    35 posts
    Member since:
    Apr 2010

    Posted 23 Apr 2010 Link to this post

    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.)

  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 27 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert Lampe
    Robert Lampe avatar
    13 posts
    Member since:
    Jan 2010

    Posted 26 May 2010 Link to this post

    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> 
  5. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 26 May 2010 Link to this post

    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.
  6. Robert Lampe
    Robert Lampe avatar
    13 posts
    Member since:
    Jan 2010

    Posted 31 May 2010 Link to this post

    Thank you! It worked.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017