Layout issues with Splitter

[Martin Roussel]

Hi, I have two related issues when using RadSplitters, using Q2 2012. I have nested splitters similar to the last example here: Nested Splitters. In one of the panes (leftmost, which is initially Collapsed="true"), I have two RadMenus and in one other (rightmost), the content of the site. The menus are loaded dynamically after some user input interactions and also the containing pane (leftmost) is dynamically expanded (Collapsed = false) when the menu loading occurs.

1-The hovering color effect of the menus is not the same width than the menu items (as illustrated in attachment). Depending on actions, the effect may be larger and thinner than the menu. This occurs if using a skin or not or if using a custom background color/sprite image in CSS. That issue is not occuring if pane is initially declared a Collapsed="false" in markup. It also occurs when using the RadSPlitBar button to collapse or expand the pane. Looks like the hovering width is calculated too soon.

2-I want one of my RadSplitBar to be not visible (Visible="false") at page initial loading and make it visible when pane is dynamically expanded (as mentioned earlier). When the bar become visible, the Splitter control gets extra and unwanted margin which cause the control to have extra horizontal and vertical scrollers. This issue is occuring in FF and Chrome and is NOT occuring if RadSplitBar is initially declared a visible (Visible="true"). Also, the problem seems to only happen on first load (first load after bar is once visible) since refreshing the content pane after that make the scrollers disapear and clear the issue.

Here is the code in question:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100%">

            <telerik:RadSplitter ID="Radsplitter5" runat="server" Skin="WebBlue" Width="100.5%" Height="110%" Orientation="Horizontal" PanesBorderSize="0" BorderSize="0" >

                <%-- this is the pane i want collapsed at startup--%>
                <telerik:RadPane ID="RadPane5" runat="server" Height="150px" Collapsed="true">
                </telerik:RadPane>

                <telerik:RadPane ID="RadPane6" runat="server" >

                    <telerik:RadSplitter ID="Radsplitter6" runat="server" Skin="WebBlue" PanesBorderSize="0" BorderSize="0" >

                        <telerik:RadPane ID="RadPane1" runat="server" CssClass="MenuPane" MinWidth="220" Width="220px" Height="100%" Collapsed="false">

                            <telerik:RadSplitter ID="Radsplitter2" runat="server" Skin="WebBlue" ResizeWithParentPane="false" Orientation="Horizontal" Width="100%" Height="100%" PanesBorderSize="0" BorderSize="0">

                                <telerik:RadPane ID="RadPane3" runat="server" CssClass="MenuPane2" Width="100%" Height="50%">

                                    <telerik:RadMenu ID="RadMenu2"  runat="server" Visible="false" Width="84.7%" CssClass="menu3" OnItemClick="RadMenu_ItemClick" EnableImageSprites="true" BorderStyle="None" Flow="Vertical">
                                     </telerik:RadMenu>

                                </telerik:RadPane>

                                <telerik:RadPane ID="RadPane4" runat="server" CssClass="MenuPane3" Width="100%" Height="50%">


                                        <telerik:RadMenu ID="RadMenu3" runat="server" Visible="false" Width="84.7%" CssClass="menu5" OnItemClick="RadMenu_ItemClick" EnableImageSprites="true" BorderStyle="None" Flow="Vertical">
                                        </telerik:RadMenu>

                                  </telerik:RadPane>


                            </telerik:RadSplitter>

                            </telerik:RadPane>

                             <%-- this is the bar i want not visible at startup--%>
                            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Visible="false" meta:resourcekey="labCollapseExpand"></telerik:RadSplitBar>

                            <telerik:RadPane ID="RadPane2" runat="server" CssClass="ContentPane" ContentUrl="Welcome.aspx">
                            </telerik:RadPane>

                    </telerik:RadSplitter>

                </telerik:RadPane>

            </telerik:RadSplitter>

        </telerik:RadAjaxPanel>

UPDATE: Ive found a partial workaround that seem to fix issue #1 for first page load only (and issue #2 but in FF only). Ive put RadSplitBar1 visible=true and added the following client-side code to collapse the pane and hide the bar at control load. Note that i had to put a timeout delay to make it work. However, issue #1 is still occurring on additional pane collapsing/expanding:

function Radsplitter6_OnClientLoaded(splitter, args) {

            if (gblCollapsed == 0) {

                setTimeout(function () {

                    var pane = splitter.getPaneById('<%= RadPane1.ClientID %>');

                    pane.collapse(1);

                    gblCollapsed = 1;

                    var splitbar = $get("<%=RadSplitBar1.ClientID %>");

                    splitbar.style.display = "none";

                }, 100);
            }


        }

Also, I made more tests with other browsers and Issue #2 also occurs on Opera, Safari for Windows.

UPDATE 2: Regarding issue #1, ive found a simpler replicating scenario, in Opera or Firefox, I just have to pop-up my browser search bar (CTRL+F) which resizes my menu pane (vertical scroller appears which reduces menu width), then the hover effect is larger than menu items. Weird thing, believe it or not, I cant reproduce at all this issue in IE8. Also, when issue occurs, clicking on menu items once will make the hover effect thinner then second time will make it the right width.

TIA

[Dobromir]

Hi Martin,

1. I tried to reproduce the issue using the provided code snippet but to no avail. Could you please provide more detailed information regarding the specific scenario? A sample fully runnable project reproducing the issue will be of great help solving this case.
   For your convenience I have attached my test page, could you please modify it to a point where the problem occurs and send it back?
2. When toggling visibility of a splitbar in a splitter that contains free sized panes (like RadSplitter6 and RadPane2) you need to reset the Width (or Height) property to its initial state, e.g.:
   

   RadSplitBar1.Visible = !RadSplitBar1.Visible;
   RadPane1.Width = System.Web.UI.WebControls.Unit.Empty;

   This requirement is due to the fact that RadSplitter preserve the calculated values of the elements with variable size and use them upon postback for performance purposes.

Kind regards,
Dobromir
the Telerik team

[Martin Roussel]

Dobromir,

Ive tested your sample It does it from the start. Only thing ive touched is code to make it compile in my solution. Ive tested it with FF 16.0.2 and Chrome 22.0.1229.94 m and same issue in both.

When I start, the page is blank with only two buttons. I click the "ShowMenus" button and get "screen1.jpg" (FF) and "screen2.jpg" (Chrome). Then I click "Toggle Splitbar" and get "screen3.jpg" (FF) and "screen4.jpg" (Chrome). If I click "ShowMenus" a couple of times, it ends to be ok until I click "Toggle Splitbar" again.

Where can I send my "modified" files?

BTW: your solution for Issue #2 doesnt seem to work (I still get the scrollers).

[Kate]

Hi Martin,

The issue that you get with the appearance of the RadMenu is a bug of the control when you set its width in percentages. I have already logged it in our internal system so we can fix it with our future updates of the controls.

Considering your other issues I would suggest that you open a support ticket where you can attach your runnable project that we can test locally and help you out.

Kind regards,
Kate
the Telerik team

[Martin Roussel]

Kate, here is the code to replicate the issue. Note that my splitter layout changed a bit compared to my original post, but issue is still there.

Markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />


            <telerik:RadSplitter ID="Radsplitter5" runat="server" Skin="WebBlue" Width="100%" Height="100%" Orientation="Horizontal" PanesBorderSize="0" BorderSize="0" >

              <telerik:RadPane ID="RadPane5" runat="server" Height="140px" Collapsed="false">


                           <asp:Button ID="button1" runat="server" Text="ShowMenus&Bar" OnClick="button1_Click" />



                </telerik:RadPane>

                <telerik:RadSplitBar ID="RadSplitBar2" runat="server" EnableResize="false" CollapseMode="Forward" meta:resourcekey="labCollapseExpandTop"></telerik:RadSplitBar>



                <telerik:RadPane ID="RadPane6" runat="server">

                 <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"  >

                    <telerik:RadSplitter ID="Radsplitter6" runat="server" Skin="WebBlue" PanesBorderSize="0" BorderSize="0"  >

                        <telerik:RadPane ID="RadPane1" runat="server" CssClass="MenuPane" MinWidth="220" Width="220px" Height="100%" Collapsed="true">

                            <telerik:RadSplitter ID="Radsplitter2" runat="server" Skin="WebBlue" ResizeWithParentPane="false" Orientation="Horizontal" Width="100%" Height="100%" PanesBorderSize="0" BorderSize="0">

                                <telerik:RadPane ID="RadPane3" runat="server" CssClass="MenuPane2" Width="220px" Height="50%">


                                    <telerik:RadMenu ID="RadMenu2"  runat="server" Visible="false" CssClass="menu3"  EnableImageSprites="true" BorderStyle="None" Flow="Vertical">
                                     </telerik:RadMenu>


                                </telerik:RadPane>

                                <telerik:RadPane ID="RadPane4" runat="server" CssClass="MenuPane3" Width="220px" Height="50%">




                                        <telerik:RadMenu ID="RadMenu3" runat="server" Visible="true" CssClass="menu5"  EnableImageSprites="true" BorderStyle="None" Flow="Vertical">
                                        </telerik:RadMenu>

                                  </telerik:RadPane>


                            </telerik:RadSplitter>

                            </telerik:RadPane>



                            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="false" CollapseMode="Forward" Visible="false" meta:resourcekey="labCollapseExpandLeft"></telerik:RadSplitBar>


                                <telerik:RadPane ID="RadPane2" runat="server" CssClass="ContentPane" >
                                </telerik:RadPane>


                    </telerik:RadSplitter>

                  </telerik:RadAjaxPanel>

                </telerik:RadPane>



            </telerik:RadSplitter>


    </form>
</body>
</html>

.cs

protected void Page_Load(object sender, EventArgs e)
{

}
protected void button1_Click(object sender, EventArgs e)
{
    RadMenu2.Visible = true;
    RadMenu2.Items.Add(new Telerik.Web.UI.RadMenuItem("Item1"));
    RadMenu2.Items.Add(new Telerik.Web.UI.RadMenuItem("Item2"));
    RadMenu2.Items.Add(new Telerik.Web.UI.RadMenuItem("Item3"));
    RadMenu2.Items.Add(new Telerik.Web.UI.RadMenuItem("Item4"));

    RadMenu3.Visible = true;
    RadMenu3.Items.Add(new Telerik.Web.UI.RadMenuItem("Item1"));
    RadMenu3.Items.Add(new Telerik.Web.UI.RadMenuItem("Item2Item2Item2"));
    RadMenu3.Items.Add(new Telerik.Web.UI.RadMenuItem("Item3"));
    RadMenu3.Items.Add(new Telerik.Web.UI.RadMenuItem("Item4"));

    RadSplitBar1.Visible = true;
    RadPane1.Collapsed = false;
    RadPane1.Width = System.Web.UI.WebControls.Unit.Empty;


}

Occuring in FF and Chrome. However, in FF, when clicking a second time on the button, it seems to fix the overflow. In Chrome, it always stays. Let me know if I still have to open a ticket.

TIA

[Vessy]

Hi Martin,

With the recently provided mark-up I was able to reproduce only the overflow issue, but not the one with the menu-hovering - I assume that should be the behavior you want to show.

In order to avoid those scroll-bars to be displayed you need to set the inner Splitter's parent Pane's Scrolling to "None":

<telerik:RadSplitter ID="Radsplitter5" runat="server" Skin="WebBlue" Width="100%"
        Height="100%" Orientation="Horizontal" PanesBorderSize="0" BorderSize="0">
        ...
        <telerik:RadPane ID="RadPane6" runat="server" Scrolling="None">
        ...

Kind regards,
Vesi
the Telerik team

[Martin Roussel]

Vesi, to recreate the menu hovering problem, you need to set RadMenu width in percentage. I did not intend to have it included in my replication code ive provided since Kate (post earlier) mentioned that it is already filed in your internal bug system.

Your solution for the overflow seem to help, thank you, but I get better result by setting overflow:hidden to "RadAjaxPanel1".