[CLOSED] Unnecessary scroll bars

**bayoglu** · Jun 18, 2013, 11:36 AM

Hello,

I am getting unnecessary scroll bars probably because of layout misconfiguration. Below is a simplified code.

main.aspx

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
  
<script runat="server">   
    protected void Page_Load(object sender, EventArgs e)
    {
        TabPanel ParentTab = new TabPanel();
        ParentTab.Icon = Icon.Cog;
        ParentTab.ID = "SeconndTabRoot";
        ParentTab.Title = "Second";
        ParentTab.Layout = "FitLayout";
        ParentTab.Closable = true;
        MainTabPanel.Items.Add(ParentTab);
        ParentTab.Render();
        Ext.Net.Panel NewPanel = new Ext.Net.Panel();
        NewPanel.ID = "ChildTab";
        NewPanel.Loader = new ComponentLoader
        {
            Url = "/Child.aspx",
            Mode = LoadMode.Frame
        };
        NewPanel.Title = "Child";
        NewPanel.Layout = "FitLayout";
        NewPanel.Border = false;
        NewPanel.Closable = true;
        NewPanel.Listeners.Close.Handler = "if(item.ownerCt){if(item.ownerCt.items){if(item.ownerCt.items.length){if(item.ownerCt.items.length == 1){item.ownerCt.close();}}}}";
        NewPanel.AddTo(ParentTab);
        ParentTab.SetActiveTab(NewPanel);
    }
</script>
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel runat="server" ID="MainMenuPanel" Region="West" Layout="AccordionLayout" Collapsible="true" Split="true" Title="Menu" Width="200" MinWidth="200" MaxWidth="400" >  
            </ext:Panel>
            <ext:TabPanel runat="server" ID="MainTabPanel" Region="Center" Layout="FitLayout" >
                <Items>
                    <ext:Panel runat="server" ID="HomePanel" Closable="false" Title="Home" Icon="House" Layout="AnchorLayout" BodyPadding="5" AutoScroll="true" Border="false">
                        <Items>   
                            <ext:Panel runat="server" ID="WelcomeMessageLabel" Border="false" MarginSpec="0 0 5 0">                                        
                            </ext:Panel>   
                            <ext:Panel ID="HomeContentPanel" runat="server" Layout="AnchorLayout" Flex="1" MinWidth="800"  MinHeight="550" AnchorHorizontal="100%" AnchorVertical="100%" Border="false">
                                <Items>
                                    <ext:Panel runat="server" ID="MyCharts" Layout="HBoxLayout" AnchorHorizontal="100%" AnchorVertical="40%" BodyPadding="5" Border="false">
                                    </ext:Panel>
                                    <ext:TabPanel runat="server" ID="MyNotifications" AnchorHorizontal="100%" AnchorVertical="60%" Border="true" MarginSpec="0 0 20 0" MaxTabWidth="230">
                                    </ext:TabPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

Child.aspx:

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="MyViewport" runat="server" Layout="FitLayout">
        <Items>
            <ext:TabPanel runat="server" ID="MyTabPanel" Layout="FitLayout">
                <Items>                 
                    <ext:Panel runat="server" ID="MyPanel" BodyPadding="10" Title="Enterprise Summary" AutoScroll="true">
                        <Items>
                            <ext:Panel runat="server" ID="ContentPanel1" Layout="FitLayout" Title="Content 01" Height="100">                                                        
                            </ext:Panel>
                            <ext:Panel runat="server" ID="ContentPanel2" Layout="VBoxLayout" Title="Content 02" MarginSpec="0 0 10 0" BodyPadding="15">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
                                </LayoutConfig>
                                <Items>
                                    <ext:Panel runat="server" ID="Panel1" Layout="HBoxLayout">
                                        <LayoutConfig>
                                            <ext:HBoxLayoutConfig Align="Stretch" Pack="Center"></ext:HBoxLayoutConfig>
                                        </LayoutConfig>
                                        <Items>
                                            <ext:Panel ID="Panel6" runat="server" Layout="FitLayout" Border="false" Height="200">           
                                            </ext:Panel>      
                                        </Items> 
                                    </ext:Panel>
                                    <ext:Panel runat="server" ID="Panel2" Layout="HBoxLayout" Height="450">                                
                                    </ext:Panel>
                                    <ext:Panel runat="server" ID="Panel3" Layout="HBoxLayout" Height="450">                                
                                    </ext:Panel>
                                    <ext:Panel runat="server" ID="Panel4" Layout="HBoxLayout" Height="450">                                
                                    </ext:Panel>
                                    <ext:Panel runat="server" ID="Panel5" Layout="HBoxLayout" Height="450">                                
                                    </ext:Panel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>                                        
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

Problems:

1) Unnecessary vertical scroll bar in Home tab panel
2) Unnecessary horizontal scroll bar in Second tab.

Known:
1) If I set "Height" for Panel1 in Child.aspx, horizontal scroll bar disappears as I wanted. I can not set height for Panel1 becuse in the real scenario, its content's height is unknown (Panel6 height=200 is only for sample issues), normally an image is loaded there with a variable height.

Desired behavior for both pages:

1) Initially no vertical or horizontal scroll bars should appear and the pages should fit browser (assuming it is maximized).
2) If browser window is resized I don't want the tabs get smaller than 800x600px and vertical/horizontal scroll bars should appear.

Can you help on the issue?

Thanks.

**Daniil** · Jun 18, 2013, 3:53 PM

Hi @bayoglu,

Originally Posted by bayoglu

1) Unnecessary vertical scroll bar in Home tab panel

I think AnchorVertical="100%" doesn't take MarginSpec of its sibling into account. This setting of WelcomeMessageLabel

MarginSpec="0 0 5 0"

adds 5 pixels to the container's height. So, I think replacing AnchorVertical="100%" with AnchorVertical="-5" should help to eliminate that unnecessary vertical scrollbar.

Originally Posted by bayoglu

2) Unnecessary horizontal scroll bar in Second tab.

AutoLayout (default layout) doesn't manage well such cases. I would try to set up Layout="AnchorLayout" for the MyPanel.

**bayoglu** · Jun 18, 2013, 4:43 PM

Hello @Daniil,

Thanks for your support.

For case-1, using negative value for AnchorVertical make the vertical scroll bar disappear but the page still reserves space for the scroll bar so the page does not fit to the right side of the browser as if there is still a vertical bar but not shown. Do you have an idea for releasing that space reserved for vertical scroll bar when it is hidden?

For case-2, applying anchorlayout to MyPanel solved the issue, many thanks.

**Baidaly** · Jun 18, 2013, 11:32 PM

Originally Posted by bayoglu

Hello @Daniil,

Thanks for your support.

For case-1, using negative value for AnchorVertical make the vertical scroll bar disappear but the page still reserves space for the scroll bar so the page does not fit to the right side of the browser as if there is still a vertical bar but not shown. Do you have an idea for releasing that space reserved for vertical scroll bar when it is hidden?

I couldn't reproduce this issue. But I can suggest to set ReserveScrollbar to False:

<ext:AnchorLayoutConfig ReserveScrollbar="False"/>

Click image for larger version.

Name: 1.PNG
Views: 10
Size: 7.8 KB
ID: 6403

**Daniil** · Jun 19, 2013, 4:33 AM

I can't reproduce i.e. as well, i.e. I can't see any space reserved for a vertical scrollbar. Also I am afraid that ReserveScrollbar="false" won't help, because it is by default.

Could you post a screenshot how it looks on your side?

**bayoglu** · Jun 19, 2013, 11:56 AM

Hello,

Below are the screen shots from IE10 and Chrome; and code producing the images.
I am using ext.net build 2.2.0.38651
Thanks.

IE10:

Click image for larger version.

Name: scroll_space_IE10.png
Views: 11
Size: 11.3 KB
ID: 6409

Chrome:

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel runat="server" ID="MainMenuPanel" Region="West" Layout="AccordionLayout" Collapsible="true" Split="true" Title="Menu" Width="200" MinWidth="200" MaxWidth="400" >  
            </ext:Panel>
            <ext:TabPanel runat="server" ID="MainTabPanel" Region="Center" Layout="FitLayout" >
                <Items>
                    <ext:Panel runat="server" ID="HomePanel" Closable="false" Title="Home" Icon="House" Layout="AnchorLayout" BodyPadding="0" AutoScroll="true" Border="false">
                        <Items>   
                            <ext:Panel runat="server" ID="WelcomeMessageLabel" Border="true" MarginSpec="0 0 5 0">                                        
                            </ext:Panel>   
                            <ext:Panel ID="HomeContentPanel" runat="server" Layout="AnchorLayout" Flex="1" MinWidth="800"  MinHeight="550" AnchorHorizontal="100%" AnchorVertical="-8" Border="true">
                                <Items>
                                    <ext:Panel runat="server" ID="MyCharts" Layout="HBoxLayout" AnchorHorizontal="100%" AnchorVertical="40%" BodyPadding="5" Border="false">
                                    </ext:Panel>
                                    <ext:TabPanel runat="server" ID="MyNotifications" AnchorHorizontal="100%" AnchorVertical="60%" Border="true" MarginSpec="0 0 0 0" MaxTabWidth="230">
                                    </ext:TabPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

**Daniil** · Jun 19, 2013, 12:10 PM

Originally Posted by bayoglu

I am using ext.net build 2.2.0.38651

The "38651" numbers doesn't tell us much, they depend on then a build was done. Here are more details.
Version numbers in a compiled assembly

So, could you, please, clarify it is the v2.2 release or a trunk build with a specific revision?

Generally, I can reproduce the issue with v2.2 release, but cannot reproduce with the latest Ext.NET from SVN trunk. So, it is probably fixed.

**Daniil** · Jun 19, 2013, 12:12 PM

I recalled such an Issue.
https://github.com/extnet/Ext.NET/issues/212

**bayoglu** · Jun 19, 2013, 12:33 PM

Hello @Daniil,

Yes I know the build numbers are not informative for you, comes from copy/paste. The build was from the SVN trunk but a month ago. I will update to the latest version and it will probably go away. will keep you informed...

Update: I confirm issue is solved in SVN Trunk. Please close the threat and beg my pardon (;

thanks.

**Daniil** · Jun 19, 2013, 1:10 PM

No problem. You are always welcome to the forums!

Thread: [CLOSED] Unnecessary scroll bars

Thread Tools

Search Thread

Display

[CLOSED] Unnecessary scroll bars

Similar Threads

[CLOSED] Enabling Scroll bars on a disabled GridPanel

[CLOSED] Show scroll bars on Multiselect control

[CLOSED] Vertical Scroll bars for the Accordion Panels

GridPanel - Tab load - Scroll bars appear on Grid

GridPanel in Tab - Paging Causes Scroll Bars to Appear

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Unnecessary scroll bars

[CLOSED] Unnecessary scroll bars

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us