This is a migrated thread and some comments may be shown as answers.

[Solved] Pane contiuously increases in width as browser window is resized - on MAC

3 Answers 75 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

jlj30 asked on 23 Mar 2013, 07:39 PM

Hi,

I have a very simpler splitter with a left and right pane.
The left pane is a navigator (treeview) and is intended to be a fixed width, unless the user specifically resizes it.
If the user changes the width of their browser window in Windows (IE, Firefox or Chrome), the left pane remains a fixed size (as desired) and the right pane has its width pro grammatically changed (see Javascript below).
If the user does the same thing on a browser on the MAC (have tried Firefox, Chrome and Safari), the left pane will grow in width as the user drags the browser window to enlarge it.

Note: Ignore th

e name MiddlePane - it's really the right pane (there used to be three).

Also, dv is a DiagramView (from MindFusion).



Nowhere in my code do I explicitly set the width of the left pane - only the right (middle) one.



Any ideas on what might be causing this?



Thanks in advance.



Jim

var splitter = $find("<%=RadSplitter1.ClientID %>");

if (splitter != null)

{

var leftpane = splitter.getPaneById('<%= LeftPane.ClientID %>');

var midpane = splitter.getPaneById('<%= MiddlePane.ClientID %>');

var leftWidth = leftpane.get_width();

}

var dv = document.getElementById("<%= DiagramView1.ClientID %>");

var marginsPlusSpltibar = 35;

if (leftpane != null)

{

//alert("In Resize Main");

// The more standards compliant browsers (mozilla/netscape/opera/chrome/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')

{

//alert("One");

alert("leftWidth = " + leftWidth);

var txtBannerHeight = document.getElementById('<%=txtBannerHeight.ClientID%>');

var bannerHeight = 0;

if (txtBannerHeight != null)

bannerHeight = parseInt(txtBannerHeight.value);

var newHeight = window.innerHeight - 270 + bannerHeight;

midpane.set_height(newHeight);

leftpane.set_height(newHeight);

var newWidth = (window.innerWidth - leftWidth - marginsPlusSpltibar);

midpane.set_width(newWidth);

splitter.set_height(newHeight);

splitter.set_width(window.innerWidth);

if (dv != null)

{

dv.style.height = (newHeight - 24) + "px";

dv.style.width = (newWidth - 5) + "px";

}

3 Answers, 1 is accepted

answered on 23 Mar 2013, 07:42 PM

By the way, here's the declaration for the splitter and panes:

<telerik:RadSplitter runat="server" ID="RadSplitter1" Orientation="Vertical" BorderStyle="None"

BorderSize="0" OnClientLoad="splitterLoaded">

<telerik:RadPane runat="server" ID="LeftPane" Width="270px" OnClientCollapsed="leftPaneCollapsed"

OnClientExpanded="leftPaneExpanded" Style="overflow: hidden">

<telerik:RadTabStrip ID="tbsNavigator" runat="server" MultiPageID="RadMultiPageNav"

EnableAjaxSkinRendering="true" SelectedIndex="0" Skin="Sitefinity">

<Tabs>

<telerik:RadTab runat="server" ID="tabProcessNav" Text="Activities" PageViewID="pagProcessNav">

</telerik:RadTab>

<telerik:RadTab runat="server" ID="tabRoles" Text="Roles" PageViewID="pagRoles">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPageNav" runat="server" RenderSelectedPageOnly="false"

SelectedIndex="0">

<telerik:RadPageView ID="pagProcessNav" runat="server">

<telerik:RadTreeView ID="trvProcess" runat="server" Skin="Office2007" BorderStyle="None"

BorderColor="LightGray" BorderWidth="2px" EnableDragAndDrop="true" EnableNodeTextHtmlEncoding="false"

OnNodeClick="trvProcess_NodeClick" OnContextMenuItemClick="trvProcess_ContextMenuClick"

OnClientContextMenuItemClicking="contextMenuItemClicking" Style="padding: 2px;

padding-bottom: 20px;">

<ContextMenus>

<telerik:RadTreeViewContextMenu runat="server" ID="ActivityContextMenu" ClickToOpen="True"

Enabled='<%# (Boolean)Session["EditProcess"] %>' Skin="Vista">

<Items>

<telerik:RadMenuItem Text="Edit" Value="EditAct">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Delete" Value="DeleteAct">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="New Activity" Value="NewAct" ToolTip="Create a new activity within this process">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="New Task" Value="NewTask">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Re-Order Activities" Value="ReOrderAct">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Re-Order Tasks" Value="ReOrderTask" ToolTip="Re-Order tasks within this activity">

</telerik:RadMenuItem>

</Items>

</telerik:RadTreeViewContextMenu>

<telerik:RadTreeViewContextMenu runat="server" ID="TaskContextMenu" ClickToOpen="True"

Enabled='<%# (Boolean)Session["EditProcess"] %>' Skin="Vista">

<Items>

<telerik:RadMenuItem Text="Edit" Value="EditTask">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Delete" Value="DeleteTask">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="New Connector" Value="NewConnect">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Role" Value="AddRole">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="New Note" Value="NewNote">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="New Data Specification" Value="NewDataSpec" Enabled="true">

</telerik:RadMenuItem>

</Items>

</telerik:RadTreeViewContextMenu>

<telerik:RadTreeViewContextMenu runat="server" ID="TaskRoleContextMenu" ClickToOpen="True"

Enabled='<%# (Boolean)Session["EditProcess"] %>' Skin="Vista">

<Items>

<telerik:RadMenuItem Text="Set CFFD Flag" Value="SetCFFD">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Remove From Task" Value="RemoveRole">

</telerik:RadMenuItem>

</Items>

</telerik:RadTreeViewContextMenu>

</ContextMenus>

</telerik:RadTreeView>

</telerik:RadPageView>

<telerik:RadPageView ID="pagRoles" runat="server">

<telerik:RadTreeView ID="trvRoles" runat="server" Height="95%" Width="95%" Skin="Office2007"

BorderStyle="None" BorderColor="LightGray" BorderWidth="2px" EnableDragAndDrop="true"

EnableNodeTextHtmlEncoding="true" OnContextMenuItemClick="trvRoles_ContextMenuClick"

OnClientContextMenuItemClicking="contextMenuItemClicking" OnNodeClick="trvRoles_NodeClick">

<ContextMenus>

<telerik:RadTreeViewContextMenu runat="server" ID="RoleContextMenu" ClickToOpen="True"

Enabled='<%# (Boolean)Session["EditProcess"] %>' Skin="Vista">

<Items>

<telerik:RadMenuItem Text="Edit" Value="EditRole">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="New Role" Value="NewRole">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Delete" Value="DeleteRole">

</telerik:RadMenuItem>

</Items>

</telerik:RadTreeViewContextMenu>

<telerik:RadTreeViewContextMenu runat="server" ID="RoleTaskContextMenu" ClickToOpen="True"

Enabled='<%# (Boolean)Session["EditProcess"] %>' Skin="Vista">

<Items>

<telerik:RadMenuItem Text="Remove Role From Task" Value="RemoveRole">

</telerik:RadMenuItem>

</Items>

</telerik:RadTreeViewContextMenu>

</ContextMenus>

</telerik:RadTreeView>

</telerik:RadPageView>

</telerik:RadMultiPage>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" ToolTip="Collapse/Expand Navigator" />

<telerik:RadPane runat="server" ID="MiddlePane" Width="900px" Scrolling="None">

<div style="float: left; margin-left: 80px; height: 28px;">

<telerik:RadMenu ID="menPrevNext" runat="server" Skin="NE_Menu" EnableEmbeddedSkins="false"

EnableRoundedCorners="True" OnItemClick="menPrevNext_ItemClick" OnPreRender="menPrevNext_PreRender"

Height="24px">

<Items>

<telerik:RadMenuItem Text="Previous" Value="prev" ImageUrl="Images/2877135_Previous_18x18.png">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Next" Value="next" ImageUrl="Images/2877135_Next_18x18.png">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</div>

<asp:Panel ID="pnlDiagram" runat="server" Visible="true">

<div style="clear: both; margin-top: 2px; margin-left: 10px; margin-right: 10px;">

<ndiag:DiagramView ID="DiagramView1" runat="server" ClientSideMode="ImageMap" Behavior="DoNothing"

Height="100%" OnNodeClicked="OnNodeClicked" OnLinkClicked="OnLinkClicked">

</ndiag:DiagramView>

<ndiag:InteractivityExtender ID="InteractivityExtender1" runat="server" TargetControlID="DiagramView1" />

</div>

</asp:Panel>

<asp:Panel ID="pnlNoActivities" runat="server" Visible="false">

<div style="text-align: center; vertical-align: middle; width: 75%; margin: 80px;

background-color: Black; height: 150px; width: auto; padding: 50px;">

<asp:Label ID="lblNoActivities1" runat="server" Text="This process has NO activities defined"

Font-Bold="true" Font-Size="Large" ForeColor="White"></asp:Label>

<br />

<asp:Label ID="lblNoActivities2" runat="server" Text="The CFFD cannot be rendered until at least 1 Activity with 1 Task exists"

Font-Bold="true" Font-Size="Large" ForeColor="White"></asp:Label>

<br />

<asp:Label ID="Label4" runat="server" Text="Select Activities & Tasks from the menu and create a new Activity and Task"

Font-Bold="true" Font-Size="Large" ForeColor="White"></asp:Label>

</div>

</asp:Panel>

</telerik:RadPane>

</telerik:RadSplitter>

answered on 23 Mar 2013, 07:54 PM

Me again,

Another bit of information I omitted.
The Javascipt code I provided earlier (which is part of a function called Resize) is called under the following circumstances:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(Resize);
window.onresize = onload = Resize;
for the following events:
function splitterLoaded(sender, eventArgs)
            {
                Resize();
            }

            function leftPaneCollapsed(pane)
            {
                Resize();
            }

            function leftPaneExpanded(pane)
            {
                Resize();
            }

Jim

answered on 27 Mar 2013, 06:01 PM

Hi Jim,

I tried to reproduce the descibed behavior but to no avail. If I understand the scenario correctly, you want to have a Two RadPanes Splitter - the left one to be fixed in size and the right one to take all the remaining width of the window. If this is the case, I will suggest you to use the approach from this help article in order to make the Splitter occupy the whole wanted space, leaving the control to calculate its sizes by its own.

Additionally, if you describe in more details what is the exact scenario and layout you want to achieve, we could suggest you what would be the best approach and to narrow you how to implement it. A sample fully runnable project demonstrating it would be also of a great help for providing you with most to the point answer.

All the best,
Vesi
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.