[CLOSED] Anchor Layout Issue (IE)

[nhg_itd]

based on below code, its should still showing the Panel1 in the browser, but it didn't (seem pushed down below the browser)

any suggestion? my goal is to toggle between Panel_Lab and Panel2 (collaped/expanded) but both of the 0% panel (Panel_LabMenu and Panel1) still shown

Screen on IE8



and when i execute the code (to show Panel2)




Screen on IE6

*notice the Panel1 being pushed below the browser


and when i execute the code (to show Panel2)

[nhg_itd]

    <style type="text/css">
    .extmenu a.x-menu-item {
        padding-left: 0;
    }    
    .ext-ie6 .x-column {
    padding: 0px !important;
}

    </style>

    <ext:Viewport ID="Viewport_MultiPatient" runat="server" Layout="Center">
        <Items>
            <ext:BorderLayout ID="BorderLayout_MultiPatient" runat="server">
                <North Split="true" Collapsible="false">
                    <ext:Panel ID="Panel_Header" runat="server" Layout="ColumnLayout" Height="30" Padding="2">
                        <Content>
                            north
                        </Content>
                    </ext:Panel>
                </North>
                <Center>
                    <ext:Panel ID="Panel_Content" runat="server" Layout="Anchor">
                        <Items>
                            <ext:Panel ID="Panel_LabMenu" runat="server" AnchorHorizontal="right" AnchorVertical="1%" Collapsible="false">
                                <TopBar>
                                    <ext:Toolbar ID="Toolbar_LabMenuBar" runat="server">
                                        <Items>
                                            <ext:Button ID="Button_Toggler_LabLeft" runat="server" Icon="ApplicationGet">
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>                                    
                                </TopBar>                                
                            </ext:Panel>
                            <ext:Panel ID="Panel_Lab" runat="server" AnchorHorizontal="right" AnchorVertical="93%" Collapsed="false">
                                <Items>
                                    <ext:ColumnLayout ID="ColumnLayout_LabContent" runat="server" Split="true" FitHeight="true">
                                        <Columns>
                                            <ext:LayoutColumn ColumnWidth="0.40">
                                                <ext:Container ID="Container_LabContent_ResultList" runat="server" Layout="FitLayout">
                                                    <Items>
                                                        
                                                    </Items>
                                                </ext:Container>
                                            </ext:LayoutColumn>
                                            <ext:LayoutColumn ColumnWidth="0.60">
                                                <ext:Container ID="Container_LabContent_ReportList" runat="server">
                                                    <Items>
                                                        <ext:BorderLayout ID="BorderLayout_LabContent_ReportList" runat="server">
                                                            <Center>
                                                                <ext:Panel ID="Panel_LabContent_ReportList_Content" runat="server" AutoScroll="true">
                                                                </ext:Panel>
                                                            </Center>
                                                            <South>
                                                                <ext:Panel runat="server" ID="Panel_LabContent_ReportList_Button" Height="1" >
                                                                    <Content>
                                                                        button
                                                                    </Content>
                                                                </ext:Panel>
                                                            </South>
                                                        </ext:BorderLayout>
                                                    </Items>
                                                </ext:Container>
                                            </ext:LayoutColumn>
                                        </Columns>
                                    </ext:ColumnLayout>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="Panel1" runat="server" AnchorHorizontal="right" AnchorVertical="1%" Collapsible="false">
                                <TopBar>
                                    <ext:Toolbar ID="Toolbar1" runat="server">
                                        <Items>
                                            <ext:Button ID="Button1" runat="server" Icon="ApplicationGet">
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>                                    
                                </TopBar>                                
                            </ext:Panel>
                            <ext:Panel ID="Panel2" runat="server" AnchorHorizontal="right" AnchorVertical="93%" Collapsed="true">
                                <Items>
                                    <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="true" FitHeight="true">
                                        <Columns>
                                            <ext:LayoutColumn ColumnWidth="0.40">
                                                <ext:Container ID="Container5" runat="server" Layout="FitLayout">
                                                    <Items>
                                                        
                                                    </Items>
                                                </ext:Container>
                                            </ext:LayoutColumn>
                                            <ext:LayoutColumn ColumnWidth="0.60">
                                                <ext:Container ID="Container_RadContent_ReportList" runat="server">
                                                    <Items>
                                                        <ext:BorderLayout ID="BorderLayout_RadContent_ReportList" runat="server">
                                                            <Center>
                                                                <ext:Panel ID="Panel_RadContent_ReportList_Content" runat="server" AutoScroll="true">
                                                                </ext:Panel>
                                                            </Center>
                                                            <South>
                                                                <ext:Panel runat="server" ID="Panel_RadContent_ReportList_Button" Height="1" >
                                                                    <Content>
                                                                        button
                                                                    </Content>
                                                                </ext:Panel>
                                                            </South>
                                                        </ext:BorderLayout>
                                                    </Items>
                                                </ext:Container>
                                            </ext:LayoutColumn>
                                        </Columns>
                                    </ext:ColumnLayout>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>

private void Toggle(string id)
{
if (id == "LAB")
{
this.Panel2.collapsed();
this.Panel_Lab.expand();
}
else
{
this.Panel_Lab.collapsed();
this.Panel2.expand();
}
}

[Daniil]

Hi,

Any chance for us to get more simple code?

Please remove all not required to reproduce the problem things using this technique:
How to reduce a sample

[nhg_itd]

Hi,

Any chance for us to get more simple code?

Please remove all not required to reproduce the problem things using this technique:
How to reduce a sample

stripped.

:)

[Daniil]

Thanks.

Well, running the page I see the same behaviors in all browsers.

So, I'm not sure what you are trying to achieve.

The best option when you need a suggestion what layout you should use is providing us with a mockup/picture which would demonstrate a layout.

[nhg_itd]

Thanks.

Well, running the page I see the same behaviors in all browsers.

So, I'm not sure what you are trying to achieve.

The best option when you need a suggestion what layout you should use is providing us with a mockup/picture which would demonstrate a layout.

yep, i'm having trouble uploading the image right now...will post it soon

anyway...what i'm trying to archive is making an accordion by expand/collapsing (tonggling) the "Panel_Lab" and "Panel2"
and make sure the "Panel_LabMenu" and "Panel1" still visible, and the viewport is occupying the whole window browser.

hope this clear enough until i able to upload.

something like this

private void Toggle(string id)
{
if (id == "LAB")
{
this.Panel2.collapsed();
this.Panel_Lab.expand();
}
else
{
this.Panel_Lab.collapsed();
this.Panel2.expand();
}
}

i know u have the accordion layout but, seem we're to late since the whole code already put it in and we're to tight on schedule to redo