Slider display incorrect in Firefox

11 posts, 0 answers
  1. Richard
    Richard avatar
    6 posts
    Member since:
    Sep 2008

    Posted 03 Dec 2008 Link to this post

    I have a slider that does not display properly in Firefox, though it displays correctly in Microsoft Internet Explorer.

     

    I took snapshots of the IE and Firefox sliders, but there's no provision for attaching images in the forums, so I'll simulate it in text...
    '<' and '>' are the arrows on the ends.  === is the thick line to the left, || is the slider indicator, and  --- is the clear line to the right of the indictor.

    In IE, the slider looks like this:

    <===============||---------------------------> 

    The same renders like this in Firefox:
    <====||--------                                              >

    In Firefox, the RadSliderTrack_slideImages <span> element has a width of 98px.  In IE, the same element has a width of 200px.

    What am I missing?  Is there a bug for calculating the slider width for Firefox?

    Thanks,
    Rod Early

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 05 Dec 2008 Link to this post

    Hi Richard,
    We are not aware of such a problem - as you can see, our online examples show the RadSlider as expected in FF. Could you please prepare and send us a simple running project, with which we can reproduce the problem locally, so that we can research what is causing it? It would be best if you send us your screenshots as well - as you yourself mention, you cannot attach files to forum threads, and that is why you will have to open a support ticket.

    Best wishes,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John Downey
    John Downey avatar
    6 posts
    Member since:
    Oct 2008

    Posted 18 Dec 2008 Link to this post

    I am getting the same problem with Firefox 3. There are many sliders that are added when you expand a section using AJAX (Update Panel). It only happens on the first load, any other time it works fine.
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 19 Dec 2008 Link to this post

    Hi John Downey,
    Unfortunately, Rod did no send us a test page demonstrating the problem and I cannot tell you what the problem in his case was or how he solved it. In case you send us a test project, we will do our best to help you fix the problem.

    Kind regards,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Richard
    Richard avatar
    6 posts
    Member since:
    Sep 2008

    Posted 19 Dec 2008 Link to this post

    Sorry for the delay on this, I've been tied up with other things.
  7. Heiko
    Heiko avatar
    2 posts
    Member since:
    Nov 2008

    Posted 06 Jan 2009 Link to this post

    Hello,

    do you have any new information regarding this problem?
    We have exactly the same issue.
  8. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Jan 2009 Link to this post

    Hello Heiko,
    Unfortunately, no one from this thread has sent us a test project, demonstrating the problem, or information how they were able to fix it. That is why, I cannot tell you what the solution was for them. In case you send us a project, which we can use to investigate the case, together with detailed steps we need to follow in order to reproduce it, we will do our best to help.

    All the best,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. Richard
    Richard avatar
    6 posts
    Member since:
    Sep 2008

    Posted 06 Jan 2009 Link to this post

    My client no longer needs the slider control on his web site so -- for now -- I'm not pursuing the slider fix.  Sorry.
  10. Heiko
    Heiko avatar
    2 posts
    Member since:
    Nov 2008

    Posted 06 Jan 2009 Link to this post

    Ok, thank you.
    I'll open a support ticket and send you a sample project.
  11. steven schmalfeld
    steven schmalfeld avatar
    9 posts
    Member since:
    Dec 2006

    Posted 10 Jun 2009 Link to this post

    This does not work under FF 3.0.10 on my machine (XP SP2)

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</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>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
            </telerik:RadScriptManager>
            <telerik:RadSlider ID="RadSlider_Items" runat="server" ItemType="item" Width="350px"
                                Height="70px" AnimationDuration="400" CssClass="ItemsSlider" Enabled=true>
                                <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>
        </div>
        </form>
    </body>
    </html>
  12. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 12 Jun 2009 Link to this post

    Hello Steven,
    I already answered your support ticket with the same question. I will give the information here as well:

    ***
    I tested you code in FF 3.0.10 and the slider showed as expected - please find a screenshot of the result I got attached. I was a able to drag the dragHandle and the value of the slider changed when I clicked on the increase/decrease button.

    Could you please explain in detail what you mean by saying that the code does not work? For example, do you get a server error or javascript error, does the slider not render correctly (CSS or HTML), are you able to move the dragHandle, etc. Does the slider not work only in FF or in IE as well? Can you reproduce the same problem with our online demos?

    In case it is a rendering problem, please prepare and send us a screenshot of the result you get on your end. In case it is an error - what is the error message?

    It would be best if you could send us a simple running project (with the DLLs in the bin folder) that demonstrates the problem you have together with detailed information on the problem.


    ***

    I would like to add that we were able to find the cause for problem that was discussed in this thread thanks to Heiko's cooperation.  The problem manifests only in case there is no RadSlider on the page initially and you load a RadSlider control with AJAX. That is why, this cannot be the same problem as in your case.

    In short the problem is that the client code for the slider is executed before the CSS files of the slider are loaded.

    In order to avoid this unpleasant effect, you can register the CSS of the skin of the slider with the page yourself, instead of using the embedded skins. That way you will ensure that the CSS of the slider is loaded before it performs its initial calculations. There are several ways that you can do this - e.g. copy the CSS files of the skin you use to your application, register the CSS files from the DLL in the code-behind or (in my opinion the simplest way) add the following to the HEAD of your page:
    <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Slider.css") %>' 
        rel="stylesheet" type="text/css" /> 
    <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.[skin_name].Slider.[skin_name].css") %>' 
        rel="stylesheet" type="text/css" /> 

    Please note that in all of those cases you need to set EnableEmbeddedSkins="false" and EnableEmbeddedBaseStylesheet="false".


    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017