[CLOSED] Tab Panel Not Rendering In Google Chrome

  1. #1

    [CLOSED] Tab Panel Not Rendering In Google Chrome

    Attached is the code for a simple page which utilizes a borderlayout within a viewport. The page renders fine in IE but I don't see the tab panel in Google Chrome. Any help you can provide is appreciated.

    
    <!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 runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
    <ext:ResourceManager runat="server" />
    <ext:Viewport ID="MainViewport" runat="server">
        <Items>
            <ext:BorderLayout ID="MainBorderLayout" runat="server">
                <North>
                    <ext:Panel ID="Panel1" runat="server" Header="false" Border="false" AutoHeight="true">
                        <Items>
                            <ext:FitLayout ID="FitLayout1" runat="server">
                                <Items>
                                    <ext:TabPanel ID="TabPanel1" runat="server" StyleSpec="margin-top:15px">
                                        <Items>
                                            <ext:Panel ID="PanelDataMining" runat="server" Title="Data Mining">
                                                <TopBar>
                                                    <ext:Toolbar ID="Toolbar1" runat="server">
                                                        <Items>
                                                            <ext:ButtonGroup ID="ButtonGroupContext" runat="server" Title="Context" Height="65">
                                                                <Items>
                                                                    <ext:TableLayout ID="TableLayout1" runat="server" Columns="1">
                                                                        <Cells>
                                                                            <ext:Cell>
                                                                                <ext:CycleButton ID="CycleButtonContext" runat="server" ShowText="true">
                                                                                    <Menu>
                                                                                        <ext:Menu ID="ContextMenu" runat="server">
                                                                                            <Items>
                                                                                                <ext:CheckMenuItem ID="CheckMenuItemClient" runat="server" Text="Client" Icon="User" Checked="true" />
                                                                                                <ext:CheckMenuItem ID="CheckMenuItemAsset" runat="server" Text="Asset" Icon="ChartLine" />
                                                                                            </Items>
                                                                                        </ext:Menu>
                                                                                    </Menu>
                                                                                </ext:CycleButton>
                                                                            </ext:Cell>
                                                                        </Cells>
                                                                    </ext:TableLayout>
                                                                </Items>
                                                            </ext:ButtonGroup>
                                                        </Items>
                                                    </ext:Toolbar>
                                                </TopBar>
                                            </ext:Panel>
                                        </Items>
                                    </ext:TabPanel>
                                </Items>
                            </ext:FitLayout>
                        </Items>
                    </ext:Panel>
                </North>
                <Center>
                    <ext:Panel ID="BottomPanel" runat="server" Header="false" Border="false">
                        <Items>
                            <ext:RowLayout ID="RowLayout2" runat="server" Split="true" Background="true">
                                <Rows>
                                    <ext:LayoutRow RowHeight="0.6">
                                        <ext:Panel ID="MainPanel" runat="server" Header="false">
                                            <Content>
                                                Center Content
                                            </Content>
                                        </ext:Panel>
                                    </ext:LayoutRow>
                                </Rows>
                            </ext:RowLayout>
                        </Items>
                    </ext:Panel>
                </Center>
                <South>
                    <ext:Panel ID="Panel2" runat="server" Header="false" Border="false">
                        <Items>
                            <ext:RowLayout ID="RowLayout1" runat="server" Split="true" Background="true">
                                <Rows>
                                    <ext:LayoutRow  RowHeight="0.6">
                                        <ext:Panel ID="Panel3" runat="server" Header="false">
                                            <Content>
                                                South Content
                                            </Content>
                                        </ext:Panel>
                                    </ext:LayoutRow>
                                </Rows>
                            </ext:RowLayout>
                        </Items>
                    </ext:Panel>
                </South>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 12, 2010 at 1:46 AM. Reason: [CLOSED]
  2. #2
    Hello, garrisrd!

    The AutoHeight property doesn't work in Chrome as expected.
    Please set the Height property of Panel1 and remove AutoHeight property, i.e. replace
    <ext:Panel ID="Panel1" runat="server" Header="false" Border="false" AutoHeight="true">
    with
    <ext:Panel ID="Panel1" runat="server" Header="false" Border="false" Height="150">
  3. #3
    You could also try setting AutoDoLayout="true" on the Viewport and leave the AutoHeight="true" on the Panel.

    Hope this helps.
    Geoffrey McGill
    Founder & CEO

Similar Threads

  1. [CLOSED] Problem with Google Chrome.
    By farisqadadeh in forum 1.x Premium Help
    Replies: 30
    Last Post: Jan 02, 2011, 7:10 PM
  2. google chrome help
    By [WP]joju in forum 1.x Help
    Replies: 0
    Last Post: Oct 02, 2009, 5:27 AM
  3. Replies: 4
    Last Post: Aug 31, 2009, 1:10 PM
  4. Google Chrome ignores key mapping?
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: May 29, 2009, 7:56 PM
  5. Google Chrome ComboBox Render
    By davidhoyt in forum Bugs
    Replies: 3
    Last Post: Dec 18, 2008, 10:48 PM

Posting Permissions