Removing scrollbars from a RadWIndow

13 posts, 1 answers
  1. Dan
    Dan avatar
    25 posts
    Member since:
    May 2008

    Posted 09 Apr 2009 Link to this post

    We use your RadWindow controls quite a bit in our application. They are invoked using the following JavaScript convention…

     

    var oWnd = radopen("EditWBSEast.aspx", "WBSRadWindow");

    oWnd.setSize(830,300);

    oWnd.Center();

     

    We define WBSRadWindow as follows:

     

    <telerik:RadWindowManager

        ID="RadWindowManager1"

        runat="server"

        Behavior="None"

        InitialBehavior="None" Left=""

        Skin="Outlook"

        style="display: inline;"

        Top=""

        DestroyOnClose="True">

        <Windows>

            <telerik:RadWindow

                ID="WBSRadWindow"

                Modal="true"

                runat="server"

                Behavior="None"

                DestroyOnClose="True"

                InitialBehavior="None"

                Title="”

                ReloadOnShow="true"

                Left=""

                NavigateUrl=""

                style="display: inline"

                Top=""

                Behaviors="None"  

                OnClientShow="OnClientShow">

            </telerik:RadWindow>

        </Windows>

    </telerik:RadWindowManager>

     

    This code provides us with a rather generic window with very little functionality but vastly better looking than the corresponding Window(Open) or Javascript alert. Our one problem is that we would also like to suppress the horizontal and vertical scrollbars.

     

    We have seen elsewhere in your documentation that a JavaScript method similar to the one below should accomplish this

     

        function OnClientShow(radWindow)  

        {   

     

           var delScrollbar = radWindow._name;

           document.getElementsByName(delScrollbar)[0].setAttribute("scrolling", "no");

     

     

           var oTop = document.documentElement.scrollTop;  

           document.documentElement.scroll = "no";  

           document.documentElement.style.overflow = "hidden";  

           document.documentElement.scrollTop = oTop;  

     

           if(document.documentElement && document.documentElement.scrollTop)  

           {  

               var oTop = document.documentElement.scrollTop;  

               document.documentElement.scroll = "no";  

               document.documentElement.style.overflow = "hidden";  

               document.documentElement.scrollTop = oTop;  

                    

           }

           else if(document.body)  

           {  

                var oTop = document.body.scrollTop;  

                document.body.scroll = "no";  

                document.body.style.overflow = "hidden";  

                document.body.scrollTop = oTop;  

            }  

        }  

      

    This method does not suppress the scrollbars for us. Could you advise us as to how to best accomplish this?

     

     

    Thanks

     

     

     

     

     

  2. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 09 Apr 2009 Link to this post

    Daniel,

    This is a shot in the dark (I'm not in a position to try it) but couldn't you say ...
      NavigateUrl="" 
      style="display: inline; overflow:hidden;" 
      Top=""  
    I use a lot of RadWindows as popup dialogs for wizards and I have a stylesheet that always sets overflow to hidden for the BODY tag of the page loaded in to the window. If the above doesn't work you could add a body{overflow:hidden;} rule to a standard style sheet you subsequently use on all the pages you load into it.

    Just a thought.

    --
    Stuart
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Stephen
    Stephen avatar
    70 posts
    Member since:
    Mar 2008

    Posted 09 Apr 2009 Link to this post

    I've found the following works for me...

    In the aspx page the window will be using apply the following inline css style at the top...


    <style>
       html
      {
    overflow: hidden;
      }
    </style>
  5. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 09 Apr 2009 Link to this post

    Hmmm. Expect the CSS-police to come banging on your door at 2am! :-)

    --
    Stuart
  6. Stephen
    Stephen avatar
    70 posts
    Member since:
    Mar 2008

    Posted 09 Apr 2009 Link to this post

    Following CSS "best practices" doesn't always work. In the end what would you rather have?  A compliant css best practice site or a happy user?  I've been in this industry far too long and no matter how many standards and best practices there are, if a best practice doesn't work then the "hacks" will always take priority.
  7. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 09 Apr 2009 Link to this post

    You'll get no arguments from me.

    --
    Stuart
  8. Stephen
    Stephen avatar
    70 posts
    Member since:
    Mar 2008

    Posted 09 Apr 2009 Link to this post

    Just a note... I did first try this in a referenced stylesheet instead of inline, but for some reason IE would show the scrollbars.  Only inline seemed to work.
  9. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 09 Apr 2009 Link to this post

    How odd. Using referenced stylesheets works as expected in FF3.

    --
    Stuart
  10. Dan
    Dan avatar
    25 posts
    Member since:
    May 2008

    Posted 10 Apr 2009 Link to this post

    Stephen's suggestion to include the style in the <head> section of the aspx document contained within the Radwindow did the trick!

    Thanks very much gentlemen.
  11. Nik
    Nik avatar
    51 posts
    Member since:
    Sep 2009

    Posted 23 Oct 2009 Link to this post

    You're right...inline style is the only thing that finally disabled the scrollbars in the radwindow. Unfortunately, I cant get overflow:auto to work. I'm putting product info in the window, which doesn't always fit to a certain height. With auto on, the scrollbar remains no matter what height I set the window at. Can anyone else figure that one out?
  12. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 26 Oct 2009 Link to this post

    Hello Nik,

    If the scrollbars are shown on the content page (e.g. the one that you load in RadWindow), this issue is not related to the RadWindow control - it is basically an IFRAME and does not (and cannot) control the scrollbars in the content page.
    If the scrollbars are displayed on the parent page however, we need to have more details about your exact setup. Please open a support ticket and send us a sample project so we could check it.



    Regards,
    Georgi Tunev
    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.
  13. Nishanth
    Nishanth avatar
    18 posts
    Member since:
    Feb 2008

    Posted 19 Jul 2011 Link to this post

    Thanks.. adding
    <style>
       html
      {
          /*added to prevent scroll bars in radwindow*/
       overflow    : hidden;
      }
    </style>

    was the only solution I could find.
  14. John
    John avatar
    43 posts
    Member since:
    Aug 2014

    Posted 19 Feb 2015 Link to this post

    The inline Style works great!  Thanks
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017