I have my slider inside of a parent container whose display I am toggling with jQuery. This works correctly in Firefox, slightly less correctly in IE8, and not at all in Google Chrome. I found this post which said this issue was fixed in the newest release, but I'm guessing that fix was only for Firefox: http://www.telerik.com/community/forums/aspnet-ajax/slider/radslider-bind-it-in-a-repeater.aspx.
In Chrome all that renders is:
Here's my simple test case (nothing in the code behind), you can see that the slider in the toggled div never shows up (remember to test in Chrome):
Note: The OnClientLoaded "fix" didn't work for Chrome and was unnecessary for the other two browsers.
In Chrome all that renders is:
| <div id="RadSlider1" class="RadSlider RadSlider_Vista " style="height:40px;width:400px;"> |
| <input id="RadSlider1_ClientState" name="RadSlider1_ClientState" type="hidden" /> |
| </div> |
Here's my simple test case (nothing in the code behind), you can see that the slider in the toggled div never shows up (remember to test in Chrome):
| |
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
| |
|
6 Answers, 1 is accepted
0
Accepted
Hi Zach,
We are aware of this problem - it manifests in Safari and Chrome. The RadSlider control calculates the size of its elements on the client. However, offsetWidth/offsetHeight return 0 in case an HTML element is in a parent with "display:none". That is why, the calculations of the slider are incorrect in this case. Generally, in such cases you should simply call the repaint method of the slider as soon as its parent becomes visible. Please refer to this article for additional information.
We have found a way to handle the case internally in the code of the slider for most supported browsers - except for Safari and Chrome. In the case of IE8 - you should simple upgrade to the latest version and I suppose that the slider will show as expected in IE8.
All the best,
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.
We are aware of this problem - it manifests in Safari and Chrome. The RadSlider control calculates the size of its elements on the client. However, offsetWidth/offsetHeight return 0 in case an HTML element is in a parent with "display:none". That is why, the calculations of the slider are incorrect in this case. Generally, in such cases you should simply call the repaint method of the slider as soon as its parent becomes visible. Please refer to this article for additional information.
We have found a way to handle the case internally in the code of the slider for most supported browsers - except for Safari and Chrome. In the case of IE8 - you should simple upgrade to the latest version and I suppose that the slider will show as expected in IE8.
All the best,
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.
0
Zach
Top achievements
Rank 1
Rank 1
answered on 13 Aug 2009, 03:16 PM
My designer thought it was the height issue causing the problem, that article did the trick, thanks!
0
Brandon
Top achievements
Rank 1
Rank 1
answered on 15 Nov 2012, 05:39 PM
Ok, I'm having same issue, but my container is a EditForm in a RadGrid. Not sure what I can hook into to grab the slider and tell it to repaint....
0
Hello Brandon,
The following approaches should help you display the RadSlider correctly in your case:
If you are using another built-in skin, please specify it instead Default in the marked places.
All the best,
Slav
the Telerik team
The following approaches should help you display the RadSlider correctly in your case:
- The first approach is to load the styles through a link tag using the Page.ClientScript.GetWebResourceUrl method. The link tag must be placed in the head content of the page:
<linkhref='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Slider.css") %>'rel="stylesheet" type="text/css" /><linkhref='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Default.Slider.Default.css") %>'rel="stylesheet" type="text/css" /> - The other way is to use the RadStyleSheetManager. Note that you must register a HttpHandler in web.config in order to enable it in your project. This can be done automatically through Smart Tag, available in Design View.
Here you can find more information about using RadStyleSheetManager.<telerik:RadStyleSheetManagerID="RadStyleSheetManager1"runat="server"><StyleSheets><telerik:StyleSheetReferenceAssembly="Telerik.Web.UI"Name="Telerik.Web.UI.Skins.Slider.css"/><telerik:StyleSheetReferenceAssembly="Telerik.Web.UI"Name="Telerik.Web.UI.Skins.Default.Slider.Default.css"/></StyleSheets></telerik:RadStyleSheetManager>
If you are using another built-in skin, please specify it instead Default in the marked places.
All the best,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Brandon
Top achievements
Rank 1
Rank 1
answered on 26 Nov 2012, 01:56 PM
Slav,
Thank you for the attempt, however it did not work.
If it helps this is a DNN site, and RadSlider is in an ASCX that is being loaded in a RadWindow. And within that ASCX control it is in an EditForm of a RadGrid.
This is VERY minor as this site is a company Extranet, and Chrome is not an officially supported browser.
Thank you for the attempt, however it did not work.
If it helps this is a DNN site, and RadSlider is in an ASCX that is being loaded in a RadWindow. And within that ASCX control it is in an EditForm of a RadGrid.
This is VERY minor as this site is a company Extranet, and Chrome is not an officially supported browser.
0
Hi Brandon,
Since you are using a RadWindow to display the edit form of RadGrid, another possible approach to resolve your problem is to attach a handler for the OnClientShow client-side event of the window, as shown in this help article. In the handler function you can reference the client-side object of the slider and call its function repaint().
I hope this helps. If you are still experiencing difficulties after trying the suggestion above, please try preparing a simple, fully runnable page that shows just your approach for displaying the custom grid edit form and send it via a new support ticket so that I can inspect your case and provide a more to the point answer.
All the best,
Slav
the Telerik team
Since you are using a RadWindow to display the edit form of RadGrid, another possible approach to resolve your problem is to attach a handler for the OnClientShow client-side event of the window, as shown in this help article. In the handler function you can reference the client-side object of the slider and call its function repaint().
I hope this helps. If you are still experiencing difficulties after trying the suggestion above, please try preparing a simple, fully runnable page that shows just your approach for displaying the custom grid edit form and send it via a new support ticket so that I can inspect your case and provide a more to the point answer.
All the best,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.