custom CSS not working for Slider

4 posts, 0 answers
  1. dony
    dony avatar
    11 posts
    Member since:
    Dec 2008

    Posted 01 Oct 2009 Link to this post

    I am trying to use a custom css for slider control for that I created new theme folder with name SliderCustom, inside I pasted the CSS and Images from default skin and changed the name of css like "Slider. SliderCustom.css"  and changed all the css class name as well. but while I am refereing this custom css, the track bar and drag hand is getting disappear, here I hav attached a screen shot of my code sample, please let me know how can I fix this issue?

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Oct 2009 Link to this post

    Hello Dony,
    Your code looks correct. Could you please post the code of your Vista skin here so that I can test it locally? I noticed that you have some additional styles defined in the HEAD of your page - could you please post those here as well? It would be best if you could post the whole code of your page that demonstrates the problem in this thread.

    I would additionally need the exact version of the Telerik.Web.UI assembly that you use and the browser, with which you tested.

    Greetings,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. dony
    dony avatar
    11 posts
    Member since:
    Dec 2008

    Posted 07 Oct 2009 Link to this post

    Hi This is my Compleat designer page code...

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server"><title></title>
     <style type="text/css">
        .sliderView
        {
            width:435px;
        }
        
        .horizontalSliderView .RadSlider
        {
            margin-top:70px;
            margin-left:30px;
        }
        
        .horizontalSliderView .ItemsSlider
        {
            margin-top:10px;
        }
        
        .horizontalSliderView .TicksSlider
        {
            margin-top:60px;
        }
        
        .verticalSliderView .RadSlider
        {
            float:left;
            margin-left:65px;
            margin-top:0px;
        }
        
        .verticalSliderView .TicksSlider
        {
            margin-left:45px;
        }
        
        /* IE6 */
        * html .verticalSliderView .RadSlider
        {
            margin-left:45px;
        }
        </style>    
      <link href="Vista/Slider.Vista.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="Form1" method="post" runat="server">
        
            <asp:ScriptManager ID="ScriptManager" runat="server" />
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All">
            </telerik:RadFormDecorator>
            <asp:Label runat="server" ID="lbl"></asp:Label>
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td style="vertical-align: top;">
                            <telerik:RadSlider ID="RadSlider_Ticks" runat="server" MinimumValue="0" MaximumValue="100" EnableEmbeddedSkins="false" 
                              Skin="Vista"
                                SmallChange="5" LargeChange="10" ItemType="tick" Height="70px" Width="350px"  AutoPostBack="true"
                                AnimationDuration="400" CssClass="TicksSlider">
                            </telerik:RadSlider>
                    </td>               
                </tr>
            </table>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>                
                    <telerik:AjaxSetting AjaxControlID="RadSlider_Items">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="lbl" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

        </form>
    </body>
    </html>

    --------------------------------------------------------------
    THIS IS THE VISTA CSS
    --------------------------------------------------
    /* r.a.d.slider Telerik skin */

    /* -------------------------------------------------------- GLOBAL SLIDER CLASSES -------------------------------------------------------- */
    .RadSlider_Vista a
    {
    cursor: pointer;
    }

    /* -------------------------------------------------------- GLOBAL SLIDER CLASSES END ----------------------------------------------------- */

    /* -------------------------------------------------------- HORIZONTAL SLIDER CLASSES -------------------------------------------------------- */
    .RadSlider_Vista.horizontal
    {
    height: 14px;
    }

    .RadSlider_Vista.horizontal a.handle
    {
    width: 10px; height: 7px; line-height: 7px;
    background-image: url('Slider/Handles.gif');
    background-repeat: no-repeat;
    margin-top: 4px;
    }

    .RadSlider_Vista.horizontal .decrease
    {
    background-position: 0 0;
    }

    .RadSlider_Vista.horizontal .increase
    {
    background-position: -10px 0;
    }

    .RadSlider_Vista.horizontal a.draghandle
    {
    top: 0;
    width: 9px; height: 14px; line-height: 14px;
    margin-top: -4px;
    background-image:  url('Slider/DragHandle.gif');
    background-repeat: no-repeat;
    }

    .RadSlider_Vista.horizontal a.draghandle:hover
    {
    background-position: -9px 0;
    }

    .RadSlider_Vista.horizontal a.draghandle:focus,
    .RadSlider_Vista.horizontal a.draghandle:active
    {
    background-position: -18px 0;
    }

    .RadSlider_Vista.horizontal .track
    {
    left: 10px; top: 0;
    margin-top: 6px;
    height: 4px; line-height: 4px;
    background: url('Slider/TrackBgr.gif') repeat-x;
    }

    .RadSlider_Vista.horizontal .selectedregion
    {
    height: 4px; line-height: 4px;
    background: url('Slider/SelectedRegionHorizontalBgr.gif') right top no-repeat;
    }
    /* -------------------------------------------------------- HORIZONTAL SLIDER CLASSES END ---------------------------------------------------- */
    /* -------------------------------------------------------- VERTICAL SLIDER CLASSES -------------------------------------------------------- */
    .RadSlider_Vista.vertical
    {
    width: 21px;
    }

    .RadSlider_Vista.vertical a.handle
    {
    width: 7px; height: 10px; line-height: 10px;
    background-image:  url('Slider/HandlesVertical.gif');
    background-repeat: no-repeat;
    margin-left: 4px;
    }

    .RadSlider_Vista.vertical .decrease
    {
    background-position: 0 0;
    }

    .RadSlider_Vista.vertical .increase
    {
    background-position: 0 -10px;
    }

    .RadSlider_Vista.vertical a.draghandle
    {
    left: 0;
    }

    .RadSlider_Vista.vertical .track
    {
    left: 0; top: 10px;
    margin-left: 6px;
    width: 8px;
    background: url('Slider/TrackVerticalBgr.gif') repeat-y;
    }

    .RadSlider_Vista.vertical .selectedregion
    {
    width: 4px;
    background: url('Slider/SelectedRegionVerticalBgr.gif') left bottom no-repeat;
    }

    .RadSlider_Vista.vertical a.draghandle
    {
    top: 0; left: 0;
    width: 14px; height: 9px; line-height: 9px;
    margin-left: -4px;
    background: url('Slider/DragVerticalHandle.gif') no-repeat;
    }

    .RadSlider_Vista.vertical a.draghandle:hover
    {
    background-position: 0 -9px;
    }

    .RadSlider_Vista.vertical a.draghandle:focus,
    .RadSlider_Vista.vertical a.draghandle:active
    {
    background-position: 0 -18px;
    }
    /* -------------------------------------------------------- VERTICAL SLIDER CLASSES END ----------------------------------------------------- */
     
    I tested this in IE8,chrome and Mozilla, no where its displaying the track and handle. 
    Product Version Number :2009.01.0311.20, this I took from the dll properties. 
    And I checked with lower version dll(AJAX Q1 2008) its working fine. Here I have Attached a file showing the output that I am getting in browser


  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 09 Oct 2009 Link to this post

    Hi Dony,
    There are no CSS selectors for the items and ticks elements in your Vista skin. I suppose that you copied the Vista skin from a previous version of the suite, in which we had not yet implemented the Items and Ticks functionality. I would recommend that you use the Vista skin from the 2009.01.0311 version and modify it according to your requirements.

    Kind regards,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top