Image control causes display issue in border layout on initial load

  1. #1

    Image control causes display issue in border layout on initial load



    I have a page with a border layout. The site is setup so that a host could add their own header image in the north panel (or have no image at all), so I need the panel to be autoheight=true, rather than setting a static height.


    The west, center and east panels adjust only for the height of the other controls in the north panel (in my sample - the Toolbar). If you resize the west panel or reload the page, the panels all adjust for the image. So this issue is only apparent on the first load of the page.


    I have seen the issue occur once in IE 7, it's been reported as happening in Chrome, and I can consistently reproduce in Firefox (I'm using 3.5.4). Each time I close the browser then re-open with the page, the issue is seen.


    Here is a sample page (I also uploaded a jpg to use):

    <ext:ViewPort ID="ViewPort1" runat="server">
     <Body>
      <ext:BorderLayout ID="BorderLayout1" runat="server">
       <North Collapsible="False" Split="False">
        <ext:Panel ID="NorthPanel" runat="server" TitleCollapse="true" AutoHeight="true" BodyStyle="padding:0px;" Border="false" ButtonAlign="Right">
         <Body>
          <ext:Image ID="HostHeaderImage" runat="server" AutoHeight="true" HideLabel="true" ImageUrl="header.jpg" />
         </Body>
         <BottomBar>
          <ext:Toolbar ID="Toolbar1" runat="server">
           <Items>
            <ext:ToolbarTextItem ID="LoggedInAs" runat="server" Text="Logged in as Sample" />
           </Items>
          </ext:Toolbar>
         </BottomBar>
        </ext:Panel>
       </North>
       <East Collapsible="true" Split="true" />
       <South Collapsible="False" Split="False">
        <ext:Panel ID="SouthPanel" runat="server" Height="0" Title="Sample Page" BodyStyle="padding:0px;">
         <Body>
         </Body>
        </ext:Panel>
       </South>
       <West Collapsible="true" Split="true" MinWidth="225" MaxWidth="400">
        <ext:Panel ID="WestPanel" runat="server" Title="Menu" Width="225">
         <Body>
         </Body>
        </ext:Panel>
       </West>
       <Center>
        <ext:Panel ID="CenterPanel" runat="server">
         <Body>        
         </Body>
        </ext:Panel>
       </Center>
      </ext:BorderLayout>
     </Body>
    </ext:ViewPort>
  2. #2

    RE: Image control causes display issue in border layout on initial load

    Hi jpadgett,

    The best advice from us is to always explicitly set the Height of the North Panel, and set the height of the <ext:Image> and remove the AutoHeight="true" property.

    The AutoHeight property can give unexpected results and explicitly setting the Height will result in better performance.

    It's best to get the height of the image on the server and set the .Height property.

    There is a potential work-around for your original code sample by calling Viewport1.DoLayout() within the Page_Load event which will force a re-calc of layout on page_load.

    Example

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                this.ViewPort1.DoLayout();
            }
        }
    </script>
    Hope this helps.

    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: Image control causes display issue in border layout on initial load

    One other thing... add an <ext:ContainerLayout> around the <ext:Image> in the "NorthPanel".

    Example

    <ext:Panel 
        ID="NorthPanel" 
        runat="server" 
        TitleCollapse="true" 
        Border="false"
        AutoHeight="true"
        ButtonAlign="Right">
        <Body>
            <ext:ContainerLayout runat="server">
                <ext:Image ID="HostHeaderImage" runat="server" HideLabel="true" ImageUrl="header.jpg" />
            </ext:ContainerLayout>
        </Body>
        <BottomBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:ToolbarTextItem ID="LoggedInAs" runat="server" Text="Logged in as Sample" />
                </Items>
            </ext:Toolbar>
        </BottomBar>
    </ext:Panel>
    Geoffrey McGill
    Founder & CEO
  4. #4

    RE: Image control causes display issue in border layout on initial load



    Thanks for the responses. I ended up having to go with your initial advice and pass in the configured header size so that the North Panel would not be covered up.

    The weird thing about the issue is that if the page is refreshed you can see the west and center panels start out over the image in the north panel and then jump down to where they are supposed to be. It only happens when the page first loads after the browser has been opened. Whatever event fires that places the panels correctly after each successive page load should be firing on the intial one as well, one would think.

    All is good, though. Thanks again for your help.

Similar Threads

  1. Replies: 3
    Last Post: Jun 27, 2012, 2:19 PM
  2. Border Layout Scroll bar issue in ext.net
    By vs.mukesh in forum 1.x Help
    Replies: 3
    Last Post: Jun 24, 2010, 3:39 PM
  3. [CLOSED] [1.0] Border Layout/Portal issue
    By state in forum 1.x Premium Help
    Replies: 3
    Last Post: Jan 22, 2010, 3:01 AM
  4. Replies: 0
    Last Post: Oct 21, 2009, 6:42 PM
  5. [CLOSED] Initial Load of ActiveTab does not display
    By bfolger in forum 1.x Premium Help
    Replies: 6
    Last Post: Aug 25, 2009, 3:13 PM

Posting Permissions