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
10 Answers, 1 is accepted
0
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.
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.
0
John Downey
Top achievements
Rank 1
Rank 1
answered on 18 Dec 2008, 01:51 PM
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.
0
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.
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.
0
Richard
Top achievements
Rank 1
Rank 1
answered on 19 Dec 2008, 10:55 PM
Sorry for the delay on this, I've been tied up with other things.
0
Heiko
Top achievements
Rank 1
Rank 1
answered on 06 Jan 2009, 10:51 AM
Hello,
do you have any new information regarding this problem?
We have exactly the same issue.
do you have any new information regarding this problem?
We have exactly the same issue.
0
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.
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.
0
Richard
Top achievements
Rank 1
Rank 1
answered on 06 Jan 2009, 11:29 AM
My client no longer needs the slider control on his web site so -- for now -- I'm not pursuing the slider fix. Sorry.
0
Heiko
Top achievements
Rank 1
Rank 1
answered on 06 Jan 2009, 11:48 AM
Ok, thank you.
I'll open a support ticket and send you a sample project.
I'll open a support ticket and send you a sample project.
0
steven schmalfeld
Top achievements
Rank 2
Rank 2
answered on 11 Jun 2009, 03:11 AM
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>
0
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:
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.
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.