RadSplitter and RadTabStrip integration layout

[Batoha]

Hello, guys.
Recently I found that in my application I need a behaviour described in this KB article: http://www.telerik.com/support/kb/aspnet-ajax/splitter/1450-radsplitter-and-radtabstrip-integration-layout.aspx
I tryed to implement the approach and found two things:
1. It doesn't work correctly all the time when you try to play with browser's window size you can find that calculations made wrong (see borders.jpg).
2. If you include
        <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1"  />
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
you won't get correct height at all. It sets it to some fixed value and keeps it unchanged whatever you do.
This all was only tested under Firefox 3.6.3.

Did anybody experienced this and if yes thrn how did you fix it?

With respect, Sergey.

[Svetlina Anati]

Hello V Smirnov,

Straight to your questions:

1) I played around with the browser and resized it in different manners but unfortunately to no avail - I was not able to reproduce the issue shown on your first screenshot. The only thing I can assume that might be causing the issue is the overflow and thus I suggest to forbid the page overflow as shown below (if scrollbars are needed, they will be generated by the splitter control):

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

If this does not help, please provide detailed reproduction steps and a sample video capture of the reproduction.

2)  As you know, to correctly configure the size of an element in percentages, all its parent elements should have explicit height set. However, when you ajaxify a control with RadAjaxManager it internal creates an update panel and wraps the control in it and you should set the size of this update panel as well e.g as shown below:

<style type="text/css">
    html, body, form
    {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow:hidden;
    }

    #RadMultiPage1Panel
    {
        height:100%;
    }
</style>

Note, that the ClientID of the update panel is formed by the client id of the ajaxified control (in this case it is the same as it sID but might be different when in INaming Containers as MasterPage, User Control, etc) and the suffix "Panel".

I hope that my explanations are detailed enough and helpful, let me know how it goes.

Greetings,
Svetlina
the Telerik team

[Batoha]

Hello, Svetlina.
I made the video but it waits 23+Mb. Could I upload it somewhere on this site? I don't think it's a good idea.
But trust me screenshot is my photoshop experience. I pictured it out from screen after resizing browser. I found more interesting things.
1. If I switch to other tabs after resizing window (being on say tab number one)  I see that tab's splitter is not resized and still in previous state but with scroll bars if I shrinked the window.
2. In most cases enlargment of the window will make the splitter to fill the area and look good.
3. If you left the browser what it was not in maximized state and then run the sample again the first tab's splitter won't fill the whole rest area.
4. overflow style doesn't help in any manner.
You can point me to some url where I could upload my video if you want me to do this anyway.

With respect, Valery.

[Batoha]

Hello, again.
Found one more interesting thing.
This strange effect of not-filling remaining area does not appear in IE 8.0.
But it exists in Opera 10.60.
And it exists in Chrome 5.0.375. (BTW Chrome also adds some scrollbars to panes marked as non-scrollable).
And it exists in Safari 5.0.

With respect, Valery.

[Svetlina Anati]

Hello V Smirnov,

I noticed that you have opened a support ticket and I recommend to continue our conversation there since the support ticket provides the ability to attach video and source code files.

Best wishes,
Svetlina
the Telerik team

[Batoha]

Hello, Svetlina.
Oh yes, I've created support ticket and added video to it.
The video is rather not very good (25 fps), but I think it shows what I wanted to point to.

With respect, Valery.

[Svetlina Anati]

Hi V Smirnov,

I already answered your support thread. Unfortunately I could not run the video but I was able to reproduce some of the problems based on your explanations and modified your code accordingly. I suggest to continue our communication there because the support ticket has a higher priority and you will get a faster response and also  there is no code which can help forum users in this thread.

Greetings,
Svetlina
the Telerik team