What's New?

[CLOSED] Layout issue

  1. #1
    Oct 14, 2011, 4:55 AM

    [CLOSED] Layout issue

    I am trying to add a panel to a div. However, the content of the DIV isn't stretching to whatever the panel contains. The following is the code:

    <form id="fForm" runat="server">
        <div style="padding:10px;">
            <div style="font-size:24px;font-weight:bold;color:black;">Overview</div>
            <div style="font-size:14px;font-weight:bold;padding-bottom:15px;">ID: 000000-0000-0000-00000000</div>
            <ext:CompositeField runat="server">
                <Items>
                    <ext:Button ID="bDelete" runat="server" Text="Delete" Icon="Delete" />
                    <ext:Button ID="bAdd" runat="server" Text="Add" Icon="Add" />
                    <ext:Button ID="bUpdate" runat="server" Text="Update" Icon="Accept" />
                </Items>
            </ext:CompositeField>
            <ext:Panel runat="server" BodyBorder="false" StyleSpec="padding-top:10px;">
                <Items>
                    <ext:ColumnLayout runat="server" Split="true">
                        <Columns>
                            <ext:LayoutColumn>
                                <ext:Panel runat="server" Width="250" Title="Details" Layout="Form" LabelAlign="Top" Padding="10">
                                    <Items>
                                        <ext:TextField ID="tFirstName" runat="server" FieldLabel="Name 1" AnchorHorizontal="100%" />
                                        <ext:TextField ID="tLastName" runat="server" FieldLabel="Name 2" AnchorHorizontal="100%" />
                                        <ext:TextField ID="tEmailAddress" runat="server" FieldLabel="Email Address" AnchorHorizontal="100%" />
                                    </Items>
                                </ext:Panel>
                            </ext:LayoutColumn>
                            <ext:LayoutColumn>
                                <ext:Panel runat="server" Width="250" Title="Title" Html="This is some content." />
                            </ext:LayoutColumn>
                        </Columns>
                    </ext:ColumnLayout>
                </Items>
            </ext:Panel>
        </div>
    </form>
    However, when it renders, it is looking like the attached screenshot. Can anyone explain why it's cutting off the left panel?
    Attached Thumbnails Click image for larger version.  Name: Capture.PNG  Views: 62  Size: 12.5 KB  ID: 3328  
    Last edited by Daniil; Oct 14, 2011 at 4:38 PM. Reason: [CLOSED]
  2. #2
    Oct 14, 2011, 5:58 AM
    Please add the following LayoutConfig to thr panel with column layout
    <LayoutConfig>
     <ext:ColumnLayoutConfig FitHeight="false"/>
</LayoutConfig>
  3. #3
    Oct 14, 2011, 3:52 PM
    This did not work.

    It is still doing what is shown in the screenshot.
  4. #4
    Oct 14, 2011, 4:02 PM
    Set FitHeight="false" for ColumnLayout (because you use layout control)

    or use column layout as in the following sample
    <%@ Page Language="C#"  %>
<%@ 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 id="Head1" runat="server">
    <title>Ext.NET Examples</title>   
</head>
<body>
    <form id="fForm" runat="server">
        <ext:ResourceManager runat="server" />
        <div style="padding:10px;">
            <div style="font-size:24px;font-weight:bold;color:black;">Overview</div>
            <div style="font-size:14px;font-weight:bold;padding-bottom:15px;">ID: 000000-0000-0000-00000000</div>
            <ext:CompositeField runat="server">
                <Items>
                    <ext:Button ID="bDelete" runat="server" Text="Delete" Icon="Delete" />
                    <ext:Button ID="bAdd" runat="server" Text="Add" Icon="Add" />
                    <ext:Button ID="bUpdate" runat="server" Text="Update" Icon="Accept" />
                </Items>
            </ext:CompositeField>
            <ext:Panel runat="server" BodyBorder="false" StyleSpec="padding-top:10px;">
                <LayoutConfig>
                    <ext:ColumnLayoutConfig FitHeight="false" Split="true" />
                </LayoutConfig>
                <Items>
                    <ext:Panel runat="server" Width="250" Title="Details" Layout="Form" LabelAlign="Top" Padding="10">
                        <Items>
                            <ext:TextField ID="tFirstName" runat="server" FieldLabel="Name 1" AnchorHorizontal="100%" />
                            <ext:TextField ID="tLastName" runat="server" FieldLabel="Name 2" AnchorHorizontal="100%" />
                            <ext:TextField ID="tEmailAddress" runat="server" FieldLabel="Email Address" AnchorHorizontal="100%" />
                        </Items>
                    </ext:Panel>
                    <ext:Panel runat="server" Width="250" Title="Title" Html="This is some content." />
                </Items>
            </ext:Panel>
        </div>
    </form>
</body>
</html>
  5. #5
    Oct 14, 2011, 4:36 PM
    This worked! Thank you!

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] FF Layout Issue
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 20, 2012, 9:24 PM
  3. [CLOSED] Layout Issue
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 28, 2011, 5:37 PM
  4. [CLOSED] Layout issue
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 01, 2009, 7:02 AM
  5. [CLOSED] Layout Issue
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 12, 2009, 2:00 PM

Posting Permissions