Welcome Guest Search | Active Topics | Sign In | Register

Treeview scrollbars inside splitterpane disapear upon splitterpane resize Options
Hub
Posted: Friday, September 2, 2011 4:01:35 PM
Rank: Advanced Member
Groups: Member

Joined: 3/16/2010
Posts: 101
Hi,

I have reproduced the problem I observed with the simple splitter below.
The left splitterpane icludes a callbackpanel itself containing a treeview.
The right panel contains simply a toolbar.
All elements are set to use 100% width (with initial widths set for both splitterpanels).
The scrolling is set to none on both splitterpanels and on auto in the treeview, so upon resizing of the splitterpanels, I would expect to see the treeview scrollbars when its content is too large to fit.

This is what I see, but only up to the point when the left splitterpanel width gets smaller than the width of the treeview content. At that point, moving the divider to the left seems to leave the treeview width unchanged (Treevirew does not adjust to 100% anymore). The effect is that one cannot see the treeview vertical scrollbar anymore, and the horizontal scrollbar scale is not recalculated.

When I get rid of the callbackpanel, however, everything is fine...

Let me know what you see.

Thanks

H

Code: HTML/ASPX
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
  
    <eo:Splitter ID="Splitter1" runat="server" Height="180px" Width="400px" 
        DividerCenterImage="00080412" DividerImage="00080411">
        <eo:SplitterPane ID="SplitterPane_Treeview" runat="server" ScrollBars="None">
            <eo:CallbackPanel ID="CallbackPanel1" runat="server" Height="150px" 
                Width="100%">
                <eo:TreeView ID="TreeView1" runat="server" ControlSkinID="None" Height="173px" 
                    Width="95%">
                    <LookNodes>
                        <eo:TreeNode CollapsedImageUrl="00030301" 
                            DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;" 
                            ExpandedImageUrl="00030302" ImageUrl="00030301" ItemID="_Default" 
                            NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none" 
                            SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;">
                        </eo:TreeNode>
                    </LookNodes>
                    <TopGroup Style-CssText="border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;">
                        <Nodes>
                            <eo:TreeNode Text="Documents and Settings">
                                <SubGroup>
                                    <Nodes>
                                        <eo:TreeNode Text="Administrator">
                                        </eo:TreeNode>
                                        <eo:TreeNode Text="All Users">
                                        </eo:TreeNode>
                                        <eo:TreeNode Text="Default User">
                                        </eo:TreeNode>
                                    </Nodes>
                                </SubGroup>
                            </eo:TreeNode>
                            <eo:TreeNode Text="Program Files">
                                <SubGroup>
                                    <Nodes>
                                        <eo:TreeNode Text="Common Files">
                                        </eo:TreeNode>
                                        <eo:TreeNode Text="ComPlus Applications">
                                        </eo:TreeNode>
                                        <eo:TreeNode Text="Internet Explorer">
                                        </eo:TreeNode>
                                        <eo:TreeNode Text="MSDN">
                                        </eo:TreeNode>
                                    </Nodes>
                                </SubGroup>
                            </eo:TreeNode>
                            <eo:TreeNode Text="Windows">
                                <SubGroup>
                                    <Nodes>
                                        <eo:TreeNode Text="Fonts">
                                        </eo:TreeNode>
                                        <eo:TreeNode Text="Help">
                                        </eo:TreeNode>
                                        <eo:TreeNode Text="System32">
                                        </eo:TreeNode>
                                    </Nodes>
                                </SubGroup>
                            </eo:TreeNode>
                        </Nodes>
                    </TopGroup>
                </eo:TreeView>
            </eo:CallbackPanel>
        </eo:SplitterPane>
        <eo:SplitterPane ID="SplitterPaneFilelist" runat="server" InitialSize="300" 
            Width="300px" >
           
            <eo:ToolBar ID="ToolBar1" runat="server" BackgroundImage="00100103" 
                BackgroundImageLeft="00100101" BackgroundImageRight="00100102" 
                SeparatorImage="00100104" Width="100%">
                <DownStyle CssText="border-right: #335ea8 1px solid; padding-right: 2px; border-top: #335ea8 1px solid; padding-left: 4px; padding-bottom: 1px; border-left: #335ea8 1px solid; padding-top: 3px; border-bottom: #335ea8 1px solid; background-color: #99afd4; cursor:hand; FONT-SIZE: 12px; FONT-FAMILY: Tahoma;" />
                <HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 3px; border-top: #335ea8 1px solid; padding-left: 3px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; background-color: #c2cfe5; cursor:hand; FONT-SIZE: 12px; FONT-FAMILY: Tahoma;" />
                <Items>
                    <eo:ToolBarItem CommandName="New" ImageUrl="00101001" ToolTip="New">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem CommandName="Open" ImageUrl="00101002" ToolTip="Open">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem CommandName="Save" ImageUrl="00101003" ToolTip="Save">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem CommandName="SaveAll" ImageUrl="00101004" ToolTip="Save All">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem Type="Separator">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem CommandName="Print" ImageUrl="00101005" ToolTip="Print">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem CommandName="PrintPreview" ImageUrl="00101006" 
                        ToolTip="Print Preview">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem Type="Separator">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem CommandName="Copy" ImageUrl="00101007" ToolTip="Copy">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem CommandName="Cut" ImageUrl="00101008" ToolTip="Cut">
                    </eo:ToolBarItem>
                    <eo:ToolBarItem CommandName="Paste" ImageUrl="00101009" ToolTip="Paste">
                    </eo:ToolBarItem>
                </Items>
                <ItemTemplates>
                    <eo:ToolBarItem Type="Custom">
                        <NormalStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
                        <HoverStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
                        <DownStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
                    </eo:ToolBarItem>
                    <eo:ToolBarItem Type="DropDownMenu">
                        <NormalStyle CssText="padding-right: 4px; padding-left: 4px; padding-bottom: 3px; border-top-style: none; padding-top: 3px; border-right-style: none; border-left-style: none; border-bottom-style: none; cursor:hand; background-image: url(00100105); background-position-x: right;" />
                        <HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 3px; border-top: #335ea8 1px solid; padding-left: 3px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; background-color: #c2cfe5; cursor:hand; background-image: url(00100106); background-position-x: right;" />
                        <DownStyle CssText="border-right: #335ea8 1px solid; padding-right: 2px; border-top: #335ea8 1px solid; padding-left: 4px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 3px; border-bottom: none; background-color:transparent; cursor:hand; background-image: url(00100105); background-position-x: right;" />
                    </eo:ToolBarItem>
                </ItemTemplates>
                <NormalStyle CssText="padding-right: 4px; padding-left: 4px; padding-bottom: 3px; border-top-style: none; padding-top: 3px; border-right-style: none; border-left-style: none; border-bottom-style: none; cursor:hand; FONT-SIZE: 12px; FONT-FAMILY: Tahoma;" />
            </eo:ToolBar>
           
        </eo:SplitterPane>
    </eo:Splitter>

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



eo_support
Posted: Friday, September 2, 2011 4:27:21 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

This is normal. There are a lot of "catches" with 100%. First 100% excludes borders. Second many browser interprets it as "suggested value", so it there are some other situations that run contradict with this (for example, long unbreakable text), it may be ignored. So it usually only works on simple HTML elements. For complex controls such as TreeView, you should use our JavaScript interface to dynamically adjust its size. See here for a working sample:

http://demo.essentialobjects.com/Demos/Splitter/Features/Auto%20Resize%20Contents/Demo.aspx

Thanks

Hub
Posted: Friday, September 2, 2011 5:04:44 PM
Rank: Advanced Member
Groups: Member

Joined: 3/16/2010
Posts: 101
Hi,

Sure works better!

Thanks for your quick and efficient help.

H


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.