[CLOSED] Page Layout Issue

Page 1 of 4 123 ... LastLast
  1. #1

    [CLOSED] Page Layout Issue

    Hi,
    This problem may not be related to you but I am asking here since you guys are layout experts and are very helpful as well (unlike ChartFX vendor).

    I have a page in Sharepoint which has a top menu. When chart control under this menu is rendered as image (instead of .NET control), it has wrong offsets. The number of pixels that this offset is wrong is equal to the number of pixels set as height for Panel 1. Could it be due to ext doing the rendering on client and chartfx doing the rendering on server?

        <asp:ContentPlaceHolder ID="PlaceHolderMain_Wrapper" runat="server">
        <ext:ViewPort runat="server" ID="mainContainer">
            <Items>            
                         <ext:RowLayout runat="server" Split="false">
                         <Rows>                        
                             <ext:LayoutRow>
                                 <ext:Panel ID="Panel1" runat="server" Title="" Height="50px" BaseCls="HeaderPanel" >
                                     <Content>
                                        
                                         <table width="100%" border="0px" cellpadding="0px" cellspacing="0px" id="globalNavigation"
                                             style="z-index: 1 !important;">
                                             <tr>
                                                 <td width="139px" valign="top">
                                                     <div id="top_left">
                                                         <sharepoint:sitelogoimage id="onetidHeadbnnr0" logoimageurl="/_layouts/images/titlegraphic.gif"
                                                             runat="server" />
                                                     </div>
                                                 </td>
                                                 <td width="10px" valign="top">
                                                     <div id="tabstartarea">
                                                         &nbsp;</div>
                                                 </td>
                                                 <td align="left">
                                                     <table width="100%" border="0px" cellpadding="0px" cellspacing="0px">
                                                         <tr>
                                                             <td align="right">
                                                                 <div id="top_right" style="z-index: 1;">
                                                                     <table width="100%" border="0px" cellpadding="0px" cellspacing="0px">
                                                                         <tr>
                                                                             <td align="right" colspan="3">
                                                                                 <div id="sitetitle">
                                                                                     &nbsp;</div>
                                                                             </td>
                                                                         </tr>
                                                                         <tr>
                                                                             <td align="left" valign="top" style="z-index: 1;">
                                                                                 <div id="topnav" style="z-index: 1;">
                                                                                     <div style="float: left; z-index: 1; position: relative;" id="div_TopNavButtons">
                                                                                         <!--- --- ---  Horizontal Top Navigation Bar --- --- --->
                                                                                         <asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">
                                                                                             <asp:ContentPlaceHolder ID="PlaceHolderHorizontalNav" runat="server">
                                                                                                 <div style="z-index: 1;">
                                                                                                     <sharepoint:aspmenu id="TopNavigationMenu" runat="server" datasourceid="topSiteMap"
                                                                                                         enableviewstate="false" accesskey="<%$Resources:wss,navigation_accesskey%>" orientation="Horizontal"
                                                                                                         staticdisplaylevels="2" maximumdynamicdisplaylevels="1" dynamichorizontaloffset="0"
                                                                                                         staticpopoutimageurl="/_layouts/images/menudark.gif" staticpopoutimagetextformatstring=""
                                                                                                         dynamichoverstyle-backcolor="#CBE3F0" skiplinktext="" staticsubmenuindent="0"
                                                                                                         cssclass="ms-topNavContainer">
                                                    <StaticMenuStyle />
                                                    <StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px" />
                                                    <StaticSelectedStyle CssClass="ms-topnavselected" />
                                                    <StaticHoverStyle CssClass="ms-topNavHover" />
                                                    <DynamicMenuStyle BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px" CssClass="adjustedZIndex" />
                                                    <DynamicMenuItemStyle CssClass="ms-topNavFlyOuts" />
                                                    <DynamicHoverStyle CssClass="ms-topNavFlyOutsHover" />
                                                    <DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected" />
                                                </sharepoint:aspmenu>
                                                                                                 </div>
                                                                                                 <sharepoint:delegatecontrol id="DelegateControl6" runat="server" controlid="TopNavigationDataSource">
                                                    <Template_Controls>
                                                        <asp:SiteMapDataSource ShowStartingNode="False" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002" />
                                                    </Template_Controls>
                                                </sharepoint:delegatecontrol>
                                                                                             </asp:ContentPlaceHolder>
                                                                                         </asp:ContentPlaceHolder>
                                                                                     </div>
                                                                                 </div>
                                                                             </td>
                                                                             <td>
                                                                                 <div id="topnav_spacer">
                                                                                     &nbsp;</div>
                                                                             </td>
                                                                             <td valign="top">
                                                                                 <table class="ms-siteaction">
                                                                                     <tr>
                                                                                         <td valign="top">
                                                                                             <!-- Help button -->
                                                                                             
                                                                                         </td>
                                                                                         <td valign="top">
                                                                                             <!-- Site Actions Menu -->
                                                                                             <sharepoint:siteactions runat="server" accesskey="<%$Resources:wss,tb_SiteActions_AK%>"
                                                                                                 id="SiteActionsMenuMain" prefixhtml="&lt;div&gt;&lt;div&gt;" suffixhtml="&lt;/div&gt;&lt;/div&gt;"
                                                                                                 menunotvisiblehtml="&amp;nbsp;">
                                        <CustomTemplate>
                                            <SharePoint:FeatureMenuTemplate ID="FeatureMenuTemplate1" runat="server" FeatureScope="Site"
                                                Location="Microsoft.SharePoint.StandardMenu" GroupId="SiteActions" UseShortId="true">
                                                <SharePoint:MenuItemTemplate runat="server" ID="MenuItem_Create" Text="<%$Resources:wss,viewlsts_pagetitle_create%>"
                                                    Description="<%$Resources:wss,siteactions_createdescription%>" ImageUrl="/_layouts/images/Actionscreate.gif"
                                                    MenuGroupId="100" Sequence="100" UseShortId="true" ClientOnClickNavigateUrl="~site/_layouts/create.aspx"
                                                    PermissionsString="ManageLists, ManageSubwebs" PermissionMode="Any" />
                                                <SharePoint:MenuItemTemplate runat="server" ID="MenuItem_EditPage" Text="<%$Resources:wss,siteactions_editpage%>"
                                                    Description="<%$Resources:wss,siteactions_editpagedescription%>" ImageUrl="/_layouts/images/ActionsEditPage.gif"
                                                    MenuGroupId="100" Sequence="200" ClientOnClickNavigateUrl="javascript:MSOLayout_ChangeLayoutMode(false);" />
                                                <SharePoint:MenuItemTemplate runat="server" ID="MenuItem_Settings" Text="<%$Resources:wss,settings_pagetitle%>"
                                                    Description="<%$Resources:wss,siteactions_sitesettingsdescription%>" ImageUrl="/_layouts/images/ActionsSettings.gif"
                                                    MenuGroupId="100" Sequence="300" UseShortId="true" ClientOnClickNavigateUrl="~site/_layouts/settings.aspx"
                                                    PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
                                                    PermissionMode="Any" />
                                            </SharePoint:FeatureMenuTemplate>
                                        </CustomTemplate>
                                    </sharepoint:siteactions>
                                                                                         </td>
                                                                                         <td valign="top">
                                                                                         </td>
                                                                                         <td valign="top">
                                                                                             <!-- Logout -->
                                                                                             <asp:LoginView ID="LoginViewAuth" runat="server">
                                                                                                 <AnonymousTemplate>
                                                                                                     <%--<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false">
                                                </wssuc:Welcome>--%>
                                                                                                 </AnonymousTemplate>
                                                                                                 <LoggedInTemplate>
                                                                                                     <asp:HyperLink NavigateUrl="/_layouts/Custom/Logout/Logout.aspx" ID="hypSignOut"
                                                                                                         runat="server" Text="Sign Out"></asp:HyperLink>
                                                                                                 </LoggedInTemplate>
                                                                                             </asp:LoginView>
                                                                                         </td>
                                                                                     </tr>
                                                                                 </table>
                                                                             </td>
                                                                         </tr>
                                                                     </table>
                                                                 </div>
                                                             </td>
                                                         </tr>
                                                     </table>
                                                 </td>
                                             </tr>
                                         </table>
                                     </Content>
                                 </ext:Panel>
                             </ext:LayoutRow>
                             
                             <ext:LayoutRow RowHeight="1.0">
                                    <ext:Panel runat="server" Title="" id="pnlMainContainer" Layout="Fit" MinHeight="500">
                                     <Content>                                                                                      
                                     <div id="LoadingBox" style="display:none" >Please Wait..</div>
                                     <div id="Loader" updatepanel="mainContainer"></div>
                                             <!--- --- --- Edit Consoles --- --- --->
                                            <placeholder id="MSO_ContentDiv" runat="server">                                                                                                                                                                              
                                            <asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
                                                <table width="100%">
                                                <wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server" />
                                                </table>
                                                <!-- horizontal seperator between header and body -->
                                            </asp:ContentPlaceHolder>        
                                            <asp:ContentPlaceHolder ID="SPNavigation" runat="server">                                                                                     
                                                <table id="tbPublishingConsoleWrapper">
                                                <sharepoint:delegatecontrol id="DelegateControl7" runat="server" controlid="PublishingConsole"
                                                    prefixhtml="&lt;tr&gt;&lt;td colspan=&quot;4&quot; id=&quot;mpdmconsole&quot; class=&quot;ms-consolemptablerow&quot;&gt;"
                                                    suffixhtml="&lt;/td&gt;&lt;/tr&gt;">
                                                    </sharepoint:delegatecontrol>
                                                </table>                                             
                                            </asp:ContentPlaceHolder>
                                             </placeholder>        
                                         <asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server"></asp:ContentPlaceHolder>                                            
                                     </Content>
                                    </ext:Panel>                               
                                </ext:LayoutRow>                                                                                                                                                    
                                </Rows>
                            </ext:RowLayout>
            </Items>
        </ext:ViewPort>
        </asp:ContentPlaceHolder>
    Last edited by Daniil; Sep 10, 2012 at 9:17 AM. Reason: [CLOSED]
  2. #2
    Hi,

    The obvious issue in your code is the fact that the Viewport control is inside the ContentPlaceHolder one. A Viewport must a single and top level container on the page. It is commonly placed into a master page, any rest layout is inside the Viewport.

    When chart control under this menu is rendered as image (instead of .NET control), it has wrong offsets.
    Could you clarify when and where is the chart rendered to?
  3. #3
    Click image for larger version. 

Name:	CB 1.JPG 
Views:	95 
Size:	26.1 KB 
ID:	4658

    Hi,
    Thanks for your reply. I removed the contentplaceholder but that did not make a difference.


    Quote Originally Posted by Daniil View Post
    Could you clarify when and where is the chart rendered to?
    We use ChartFX control which is just under the top menu control (which is within viewport). If I change the Panel1 height to 20px, the offset will be wrong by 20px. If I change it to 100px, offset will be off by 100px. See the attached image. That image which appears below the toolbar is supposed to be just an overlay on the toolbar icon itself to create the hover effect but it appears 50px below the toolbar. Same happens with right click menu which appears 50px below the mouse cursor. I think the issue is that ChartFX control does its calculations on server side and ext does its rendering on client side so chartfx may be is not aware of ext panel.
  4. #4
    Quote Originally Posted by OSYS_FMS View Post
    I removed the contentplaceholder but that did not make a difference.
    Yes, it may not affect on the main issue. But it can cause some unpredictable and hard-to-fix issues.

    Regarding the main issue.

    Unfortunately, it is hard to say anything concrete without a sample to reproduce the problem.

    The only thing we can say at the moment - using Ext.NET in the code snippet you have posted is arguable. Please note that Ext.NET layouts doesn't affect on the markup within Content.

    Your Ext.NET layout can guarantee the following:

    1. A Viewport will occupy a whole screen. If that Viewport is a single top level control on the page.

    2. The two rows with the Panels according the RowLayout. The height of the first one should be 50px, the second - all rest available height.

    Generally, that is all. It can't guarantee how the markup within the Panels Content will be rendered.

    Maybe, removing the Viewport could make the things better.

    If you will be able to provide us with a full sample (please simplify as much as you can) to reproduce the problem, we would do our best to investigate.
  5. #5
    Hi,
    I have a test project which demonstrates the issue but the zip file is 6.15 MB(it contains ChartFX DLLs) which I can not upload.
  6. #6
    Please send to
    support@object.net
  7. #7
    Thanks, I was able to run the project.

    Please clarify is the issue the following: when I move mouse over the toolbar buttons its highlighting images are shifted down?
  8. #8
    Quote Originally Posted by Daniil View Post
    Please clarify is the issue the following: when I move mouse over the toolbar buttons its highlighting images are shifted down?

    Yes that's the issue. And the number of pixels that highlighting images are shifted down is the number of pixels that panel1 in top row has in its height. Also try right clicking the chart and see that right click menu is also below the mouse cursor (same number of pixels again).
  9. #9
    Ok, investigating.
  10. #10
    I can suggest to replace the Panel with a Container. It appears to fix the issue.

    Interesting that only Panel causes this effect, but Container doesn't. Maybe a CSS issue or an issue in the ChartFX positioning mechanism.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="ChartFX.WebForms" Namespace="ChartFX.WebForms" TagPrefix="chartfx7" %>
    <%@ 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 runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <div style="height:50px;">I cause offsets</div>
    
            <ext:Container runat="server">
                <Content>
                    <chartfx7:Chart 
                        runat="server" 
                        Width="600px" 
                        Height="400px" 
                        EnableViewState="true"
                        RenderFormat="Auto">
                        <ToolBar Visible="True" />
                    </chartfx7:Chart>
                </Content>
            </ext:Container>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 22, 2012 at 11:19 AM.
Page 1 of 4 123 ... LastLast

Similar Threads

  1. [CLOSED] layout issue when using RowLayout within column layout
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 11, 2012, 2:40 PM
  2. [CLOSED] Page layout in IFrame and resize issue
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 25, 2011, 8:35 AM
  3. [CLOSED] Page Layout
    By ArcadisUS in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 09, 2011, 6:07 PM
  4. [CLOSED] Page layout using layout controls.
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 23, 2010, 12:08 PM
  5. Row and Colum Layout in same page
    By Sameera in forum 1.x Help
    Replies: 2
    Last Post: Jan 13, 2010, 1:27 PM

Posting Permissions