[CLOSED] Layout issues

  1. #1

    [CLOSED] Layout issues

    Hi,

    i am having Layout issues (Mainly in ie6 - Using v2.0.50727 Coolite.Ext.Web) Using the code below. I have been able to see these controls on an individual basis working in ie6 from your example browser, however when plugged together as below the PanelSelection Floats higher than its bounding parent. Plus the Column Layouts do not fit in the available screen space. Nor does the ProposalNAvigationCollapsed function work (This should expand or contract the PanelSelection to fill available screen space. This code works fine in ie7 and above.

    Having said that - Whilst trying various options ot see why it was not working in ie6 I changed the split="true" to false. This had the effect of incorrectly drawing the frame around the Available Templates Panel and occasionally displaying in the same offset manner as in ie6. Ive attached an image of the ie7 incorrect frame.
    Please can you help me
    a) understand if this will work in ie6 and how to make it work.
    b)understand why changing the Split to false had such a visually impact. I dont want these to be split.

    Many Thanks


    Code:
    <%@ Page Language="c#" ContentType="text/html" ResponseEncoding="iso-8859-1" CodeBehind="tracker_pssrTemplate.aspx.cs"
        AutoEventWireup="True" Inherits="Com.Dss.Kms.Tracker.tracker_pssrTemplate" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head runat="server">
        <title>PSSR Template</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
        <ext:TokenScript ID="TokenScript1" runat="server">
            <script type="text/javascript">
    
                function ProposalNavigationCollapsed() {
                    #{ViewPortPSSRTemplate}.doLayout(); 
                    
                }
            </script>
        </ext:TokenScript>
    </head>
    <body>
        <form id="PSSRTemplate_Form" name="PSSRTemplate_Form" action="" method="post" runat="server">
    
        <ext:ScriptManager runat="server"></ext:ScriptManager>
        <ext:ViewPort ID="ViewPortPSSRTemplate" runat="server" >
            <Body>
                <ext:RowLayout ID="RowMain" runat="server"  >
                    <ext:LayoutRow>
                        <ext:Panel ID="PanelHeader" runat="server">
                            <Body>
                                Header Module
                            </Body>
                        </ext:Panel>
                    </ext:LayoutRow>
                    
                    <ext:LayoutRow >
                        <ext:Panel ID="PanelNavigation" runat="server" BaseCls="TransparentHolder">
                            <Body>
                            <ext:Panel ID="Panel6" Shadow="Drop"  runat="server" Frame="true" Title="Available Templates"
                                                                        BodyStyle="padding:20px"    ButtonAlign="Right" Visible="true" Hidden="false" Collapsible="true">
                                                                        <Body>
                                NavigationBar
                                </Body>
                                <Listeners>
                                    <Collapse Handler="ProposalNavigationCollapsed();" />
                                    <Expand Handler="ProposalNavigationCollapsed();" />
                                </Listeners>
                                </ext:Panel>
                            </Body>
                           
                        </ext:Panel>
                    </ext:LayoutRow>
                    
                    <ext:LayoutRow RowHeight="1.0">
                        <ext:Panel ID="PanelPageContent" runat="server" BaseCls="TransparentHolderBottom" Frame="true"  >
                            <Body>
                                <ext:FitLayout runat="server">
                                    <Items>
                                    <ext:Panel ID="PanelPSSRTemplates" Shadow="Drop"  runat="server" Frame="true" Title="Assign PSSR Templates"
                                                       ButtonAlign="Right" Visible="true" Hidden="false" Collapsible="false">
                                    <Body>
                                        <ext:RowLayout ID="RowContent" runat="server">
                                            <ext:LayoutRow RowHeight="1.0">
                                                <ext:Panel ID="PanelSelection" runat="server" BaseCls="TransparentHolder">
                                                    <Body>
                                                        <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="false"  FitHeight="true" >
                                                            <Columns>
                                                                <ext:LayoutColumn >
                                                                    <ext:Panel ID="Panel1" Shadow="Drop"  runat="server" Frame="true" Title="Available Templates"
                                                                            ButtonAlign="Right" Visible="true" Hidden="false" Collapsible="false">
                                                                        <Body>
                                                                            This is some content.
                                                                        </Body>
                                                                    </ext:Panel>
                                                                </ext:LayoutColumn>
                                                                <ext:LayoutColumn >
                                                                    <ext:Panel ButtonAlign="Center" ID="Panel2" runat="server" Width="34" Border="false"
                                                                        BaseCls="TransparentHolder" BodyStyle="text-align:center;padding-top:25px">
                                                                        <Body>
                                                                            <ext:Button Width="16" ID="Button1" runat="server" Icon="ResultsetNext" StyleSpec="margin-bottom:2px;">
                                                                                <Listeners>
                                                                                    <Click Handler="" />
                                                                                </Listeners>
                                                                                <ToolTips>
                                                                                    <ext:ToolTip ID="ToolTip1" runat="server" Title="Add" Html="Add Selected Rows" />
                                                                                </ToolTips>
                                                                            </ext:Button>
                                                                            <ext:Button Width="16" ID="Button2" runat="server" Icon="ResultsetLast" StyleSpec="margin-bottom:2px;">
                                                                                <Listeners>
                                                                                    <Click Handler="" />
                                                                                </Listeners>
                                                                                <ToolTips>
                                                                                    <ext:ToolTip ID="ToolTip2" runat="server" Title="Add all" Html="Add All Rows" />
                                                                                </ToolTips>
                                                                            </ext:Button>
                                                                            <ext:Button Width="16" ID="Button3" runat="server" Icon="ResultsetPrevious" StyleSpec="margin-bottom:2px;">
                                                                                <Listeners>
                                                                                    <Click Handler="" />
                                                                                </Listeners>
                                                                                <ToolTips>
                                                                                    <ext:ToolTip ID="ToolTip3" runat="server" Title="Remove" Html="Remove Selected Rows" />
                                                                                </ToolTips>
                                                                            </ext:Button>
                                                                            <ext:Button Width="16" ID="Button4" runat="server" Icon="ResultsetFirst" StyleSpec="margin-bottom:2px;">
                                                                                <Listeners>
                                                                                    <Click Handler="" />
                                                                                </Listeners>
                                                                                <ToolTips>
                                                                                    <ext:ToolTip ID="ToolTip4" runat="server" Title="Remove all" Html="Remove All Rows" />
                                                                                </ToolTips>
                                                                            </ext:Button>
                                                                        </Body>
                                                                    </ext:Panel>
                                                                </ext:LayoutColumn>
                        
                                                                <ext:LayoutColumn ColumnWidth="1.0" >
                                                                    <ext:Panel ID="Panel3" Shadow="Drop"  runat="server" Frame="true" Title="Selected Templates">
                                                                        <Body>
                                                                            <ext:Label runat="server" Text="This is some content."></ext:Label>
                                                                        </Body>
                                                                    </ext:Panel>
                                                                </ext:LayoutColumn>
                                                                <ext:LayoutColumn >
                                                                <ext:Panel ID="Panel4">
                                                                        <Body>
                                                                            &nbsp;
                                                                        </Body>
                                                                    </ext:Panel>
                                                                </ext:LayoutColumn>
                                                            </Columns>
                </ext:ColumnLayout>
                                                    </Body>
                                                </ext:Panel>
                                            </ext:LayoutRow>
                                            <ext:LayoutRow >
                                                <ext:Panel ID="Panel5" runat="server" BaseCls="TransparentHolder">
                                                    <Body>
                                                        Date Controls
                                                    </Body>
                                                </ext:Panel>
                                            </ext:LayoutRow>
                                        </ext:RowLayout>
                                    </Body>
                                    <Buttons>
                                        <ext:Button ID="Button7" runat="server" AutoPostBack="false" Text="Save">
                                            <Listeners>
                                                <Click Handler="getData('1');" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:Button ID="Button8" runat="server" AutoPostBack="false" Text="Cancel">
                                            <Listeners>
                                                <Click Handler="getData('0');" />
                                            </Listeners>
                                        </ext:Button>
                                    </Buttons>
                                </ext:Panel>
                                </Items>
                                </ext:FitLayout>
                            </Body>
                        </ext:Panel>
                    </ext:LayoutRow>
                </ext:RowLayout>
            </Body>
        </ext:ViewPort>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	Capture1111.JPG 
Views:	113 
Size:	30.0 KB 
ID:	1946  
    Last edited by Daniil; Nov 29, 2010 at 7:55 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi,

    Please do not forget to use [CODE ] tags. You can see how much better it looks.
  3. #3
    At lease one issue I discovered in your code. What is the TransparentHolderBottom css class?

    Example
    <ext:Panel ID="PanelPageContent" runat="server" BaseCls="TransparentHolderBottom" Frame="true">
    I guess you should use Cls property instead of BaseCls.

    Could you simplify the code leaving only needed to reproduce code?
  4. #4
    Apologies re Extra Styles -
    .TransparentHolder, .TransparentHolderBottom, TransparentHolderNoPadding
    {
        background-color:Transparent !important;
        padding:5px 5px 0px 5px;
        margin:0px;
    }
    
    .TransparentHolderBottom
    {
        padding-bottom:5px !important;
    }
    I will try the Cls option, however I have stripped the code down to its absolute minimum. Each Panel only has a small sentence in it to highlight its content.

    Many thanks
    Last edited by Daniil; Nov 25, 2010 at 12:25 PM. Reason: Please use [CODE] tags
  5. #5

    Update

    I changed it to Cls - It is still the same.
    I removed the extra Styling all together - Still the same problem.

    Interestingly though if I give the "panel1" Titled "Available Temnplates" a Width of "200" - It renders correctly in ie7. ie6 is still a problem. I tried to give the panels a negligible height as well - This rendered OK in ie7 + and the offset issues resolved in ie6, however it still would not fill the parent panels appropriatly and behaved irratically in terms of layout when collapsed and expanded ?

    Thought I would mention it in case it triggers any insperation? I await any further suggestions you have.

    Many Thanks
  6. #6
    Hi,

    I think the reason of problem is requirement to explicitly set RowHeight or LayoutRow content's Height when it deals with RowLayout and ColumnWidth or LayoutColumn content's Width when it deals with ColumnLayout.

    A configuration can look something like this:

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head runat="server">
        <title>Coolite 0.8.x Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ScriptManager runat="server" />
        <ext:ViewPort runat="server">
            <Body>
                <ext:RowLayout runat="server">
                    <ext:LayoutRow>
                        <ext:Panel ID="PanelHeader" runat="server" Html="Header Module" />
                    </ext:LayoutRow>
                    <ext:LayoutRow>
                        <ext:Panel runat="server">
                            <Body>
                                <ext:Panel runat="server" Title="Available Templates" Html="NavigationBar" />
                            </Body>
                        </ext:Panel>
                    </ext:LayoutRow>
                    <ext:LayoutRow RowHeight="1.0">
                        <ext:Panel runat="server">
                            <Body>
                                <ext:FitLayout runat="server">
                                    <Items>
                                        <ext:Panel runat="server" Title="Assign PSSR Templates">
                                            <Body>
                                                <ext:RowLayout runat="server">
                                                    <ext:LayoutRow RowHeight="1.0">
                                                        <ext:Panel runat="server">
                                                            <Body>
                                                                <ext:ColumnLayout runat="server" FitHeight="true">
                                                                    <Columns>
                                                                        <ext:LayoutColumn ColumnWidth="0.17">
                                                                            <ext:Panel runat="server" Title="Available Templates" Html="This is some content." />
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn ColumnWidth="0.03">
                                                                            <ext:Panel runat="server">
                                                                                <Body>
                                                                                    <ext:Button runat="server" Width="16" Icon="ResultsetNext" />
                                                                                    <ext:Button runat="server" Width="16" Icon="ResultsetLast" />
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn ColumnWidth="0.8">
                                                                            <ext:Panel runat="server" Title="Selected Templates" Html="This is some content." />
                                                                        </ext:LayoutColumn>
                                                                    </Columns>
                                                                </ext:ColumnLayout>
                                                            </Body>
                                                        </ext:Panel>
                                                    </ext:LayoutRow>
                                                    <ext:LayoutRow>
                                                        <ext:Panel runat="server" Html="Date Controls" />
                                                    </ext:LayoutRow>
                                                </ext:RowLayout>
                                            </Body>
                                            <Buttons>
                                                <ext:Button runat="server" Text="Save" />
                                                <ext:Button runat="server" Text="Cancel" />
                                            </Buttons>
                                        </ext:Panel>
                                    </Items>
                                </ext:FitLayout>
                            </Body>
                        </ext:Panel>
                    </ext:LayoutRow>
                </ext:RowLayout>
            </Body>
        </ext:ViewPort>
        </form>
    </body>
    </html>
    You could use this code to prepare a sample for us which would reproduce the issue.
    Last edited by Daniil; Nov 25, 2010 at 2:24 PM. Reason: Corrected grammar
  7. #7

    Fix

    Thanks for the code example. I have just implemented it and with a few tweaks it is now working as I intended.
    Much appreciated.

    I will analyze the disfferences and post back my findings if I believe them useful for others.

    Thanks Again.
  8. #8
    Quote Originally Posted by sadaf View Post
    Thanks for the code example. I have just implemented it and with a few tweaks it is now working as I intended.
    Much appreciated.
    Glad to help you.


    Quote Originally Posted by sadaf View Post
    I will analyze the disfferences and post back my findings if I believe them useful for others.
    Sure, it would be good because this info can help another members.

Similar Threads

  1. [CLOSED] Layout issues
    By Daly_AF in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 03, 2012, 1:04 PM
  2. [CLOSED] More Layout Issues
    By FAS in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 27, 2012, 7:20 PM
  3. [CLOSED] Ipad 3 layout issues
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 21, 2012, 11:22 AM
  4. [CLOSED] [1.0] iFrame and IE7 layout issues
    By betamax in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 01, 2010, 2:00 PM
  5. [CLOSED] [1.0] Having layout issues in ie8 only
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 18, 2010, 5:18 AM

Posting Permissions