Removing scrollbars from a RadWIndow

[Dan]

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

 

 

 

 

 

[Stuart Hemming]

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

[Stephen]

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>

[Stuart Hemming]

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

--
Stuart

[Stephen]

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.

[Stuart Hemming]

You'll get no arguments from me.

--
Stuart

[Stephen]

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.

[Stuart Hemming]

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

--
Stuart

[Dan]

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.

[Nik]

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?

[Georgi Tunev]

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.

[Nishanth]

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

was the only solution I could find.

[John]

The inline Style works great!  Thanks