Controlling RadWindow Autosize Scroll Bars Better

[James]

Hi,

I've searched the threads on this issue, and I've found that there does not seem to be a good, consistent global solution for really benefitting from the Autosize property.

Overall, it appears to me that if you page grows just a tiny bit after the PageLoad event, you get unsightly scroll bars.  The only way that I've been able to avoid that is to set the MinWidth/Height properties, which results in a somewhat time consuming "hit and miss" guessing game on the best sizes.  

It seems to me, that there should be a way to add a "Autosize" buffer, or something like, maybe utilizing a CSS.  Has anybody found a good way to tackle this globally, with CSS on the RadWindow, or the page itself, or by some other technique.  Or, does anyone know how to run the Autosize() function at a time later than the PageLoad, to help deal with the issue of the page grows a little but with some client side rendering or something?

Check out the screen shot for some perspective on my problem. 

Thanks a ton.  

Jim

[Marin Bratanov]

Hi Jim,

The issue in your screenshot is usually due to margins and paddings on the html, body or form elements of the page inside. Please try adding the following CSS in it:

html, body, form
{
    margin: 0;
    padding: 0;
    height: 100%;
}

I also suggest you examine the following help article on configuring your pages for Autosizing: http://www.telerik.com/help/aspnet-ajax/radwindow-troubleshooting-autosize-not-correct.html.

Also, for the cases when JavaScript/ajax requests modify your page you can call the autoSize() method from the client-side API of the RadWindow when this happens. How to get a reference to it from inside the content page is shown in this help article (the GetRadWindow() function).

Regards,
Marin
the Telerik team

[James]

Wow, 

I'm still struggling with this.  I've attached a couple screen shots.

The first one shows the section of the page that appears to be causing the scroll bars.  The second one shows what I think should be the controlling CSS class that should be setting the margin, padding, and height as you recommended below (It is higher in the page hierarchy.).  

Another weird thing is that the first screen shot is inheriting the HTML class, but it does not see my override for that class adding your margin, padding, and height.

While I am not a CSS expert, my gut tells me that something on this page is resizing client side or something.  Which, to me, means that I am going to have to use the client side API to run the Autosize() event.  However, I'm not sure "when" and "how" to run that event.  Any recommendations?

Any recommendations on reconfigging the CSS from above?

Thanks so much!

Jim

[Marin Bratanov]

Hi Jim,

Based on the screenshots only I cannot confirm anything with certainty, but have you tried to remove the margins and paddings for the body element as well, as it is the HTML element that most often has a padding/margin which can cause such small overflow.

On the matter why the rules from your CSS class are not applied to the td element - the class is set to the table element, not to the td elements inside. It is also possible that the table cells have some default padding, you can try modifying it in your table.

With this information I can only recommend that you include my CSS snippet as it is and see what happens.

In case something (most likely JavaScript) actually modifies the page after it is loaded you should find this piece of code and call autoSize() after it has finished. How to call autosize - place the following two functions:

//get the reference to the RadWindow
function GetRadWindow()
        {
            var oWindow = null;
            if (window.radWindow) oWindow = window.radWindow;
            else if (window.frameElement && window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
            return oWindow;
        }

//calls autosize. Call this function after the other code that resizes your content:
function callAutoSize()
{
     GetRadWindow().autoSize();
}

If you are still having this issue please isolate your case (see this blog for useful information on how to do this) and either paste a runnable version of your page that reproduces the error here, or open a new support ticket where we can examine the situation.

Kind regards,
Marin
the Telerik team