Parent container hidden, Slider never shows up in Chrome

7 posts, 1 answers
  1. Zach
    Zach avatar
    13 posts
    Member since:
    Jan 2009

    Posted 11 Aug 2009 Link to this post

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

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Test2" %> 
     
    <!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>Untitled Page</title> 
     
        <script src="scripts/jquery.js" language="javascript"></script> 
     
        <script language="javascript" type="text/javascript"
            $(document).ready(function(){ 
                $("#showHiddenDiv").click(function(){ 
                    $("#hiddenFromStart").toggle(); 
                }); 
            }); 
        </script> 
     
    </head> 
    <body> 
        <form runat="server"
        <asp:ScriptManager runat="server" ID="uxScriptManager"
        </asp:ScriptManager> 
        <telerik:RadSlider runat="server" ID="uxFilterSlider" Orientation="Horizontal" ItemType="Item" 
            Width="400" TrackPosition="Center" Skin="Vista" Height="40" TrackMouseWheel="true"
            <Items> 
                <telerik:RadSliderItem runat="server" Text="None" Value="0" /> 
                <telerik:RadSliderItem runat="server" Text="Very Easy" Value="1" /> 
                <telerik:RadSliderItem runat="server" Text="Easy" Value="2" /> 
                <telerik:RadSliderItem runat="server" Text="Medium" Value="3" /> 
                <telerik:RadSliderItem runat="server" Text="Hard" Value="4" /> 
            </Items> 
        </telerik:RadSlider> 
        <id="showHiddenDiv" style="cursor: pointer;">Show Hidden Slider</a> 
        <div id="hiddenFromStart" style="display: none;"
            I was hidden! 
            <telerik:RadSlider runat="server" ID="RadSlider1" Orientation="Horizontal" ItemType="Item" 
                Width="400" TrackPosition="Center" Skin="Vista" Height="40" TrackMouseWheel="true"
                <Items> 
                    <telerik:RadSliderItem runat="server" Text="None" Value="0" /> 
                    <telerik:RadSliderItem runat="server" Text="Very Easy" Value="1" /> 
                    <telerik:RadSliderItem runat="server" Text="Easy" Value="2" /> 
                    <telerik:RadSliderItem runat="server" Text="Medium" Value="3" /> 
                    <telerik:RadSliderItem runat="server" Text="Hard" Value="4" /> 
                </Items> 
            </telerik:RadSlider> 
        </div> 
        </form> 
    </body> 
    </html> 
     



    Note: The OnClientLoaded "fix" didn't work for Chrome and was unnecessary for the other two browsers.

  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 12 Aug 2009 Link to this post

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

    Posted 13 Aug 2009 Link to this post

    My designer thought it was the height issue causing the problem, that article did the trick, thanks!
  5. Brandon
    Brandon avatar
    3 posts
    Member since:
    Dec 2010

    Posted 15 Nov 2012 Link to this post

    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....
  6. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 20 Nov 2012 Link to this post

    Hello Brandon,

    The following approaches should help you display the RadSlider correctly in your case:
    1. 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:
      <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.Default.Slider.Default.css") %>'
          rel="stylesheet" type="text/css" />
    2. 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:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
          <StyleSheets>
              <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Slider.css" />
              <telerik:StyleSheetReference Assembly="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.
  7. Brandon
    Brandon avatar
    3 posts
    Member since:
    Dec 2010

    Posted 26 Nov 2012 Link to this post

    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.
  8. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 29 Nov 2012 Link to this post

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