What's New?

[CLOSED] Multiple FieldSet within ColumnLayout

  1. #1
    Feb 03, 2009, 1:18 PM

    [CLOSED] Multiple FieldSet within ColumnLayout

    *Hi,

    *I'm having problems placing multiple FieldSets within a ColumnLayout.

    If I only have one fieldset per column, all is good in IE, but there are no spaces between them in Firefox.

    As I can't have multiple elements within a ColumnLayout I'm wrapping the FieldSets in a Panel. Doing this then extends the fieldset across into the other column.

    I've tried all combinations of groups (i.e. Panel -> FitLayout -> ColumnLayout -> Panel -> FieldSet etc) but I can't get this work.

    The who page is loaded within a Tab Panel, which has the LayoutOnTabChange property set to true, but this is had no effect.

    I'm sure I haven't nested the elements correctly, but I can't figure out the right order.

    Here's the code :

    ******* <ext:ViewPort ID="contactViewPort" runat="server">
*********** <Body>
*************** <ext:BorderLayout ID="BorderLayout1" runat="server">
******************* <Center>
*********************** <ext:Panel runat="server" Border="false">
*************************** <Body>
******************************* <ext:FitLayout ID="FitLayout2" runat="server">
*********************************** <ext:Panel ID="Panel1" BodyStyle="padding:5px;" runat="server" Border="false" AutoScroll="true"* >
*************************************** <TopBar>
*************************************************** <ext:Toolbar* ID="ToolBar1" runat="server">
******************************************************* <Items>
*********************************************************** <ext:Button ID="btn_saveChanges" runat="server" Text="Save Changes" Icon="PageSave">
************************************************************** <AjaxEvents>
******************************************************************* <Click OnEvent="saveContact">
*********************************************************************** <EventMask ShowMask="true" Msg="Saving Contact..." MinDelay="500" />************************************************** *
******************************************************************* </Click>
*************************************************************** </AjaxEvents>
*********************************************************** </ext:Button>
*********************************************************** <ext:Button ID="btn_openCompany" runat="server" Text="Open Company" Icon="BuildingGo">
************************************************************** <Listeners>
******************************************************************* <Click Handler="
*********************************************************************** Coolite.AjaxMethods.openCompany({
*************************************************************************** success: function(result) {
******************************************************************************* eval(result);
*************************************************************************** }
*********************************************************************** });" />
*************************************************************** </Listeners>
*********************************************************** </ext:Button>
******************************************************* </Items>
*************************************************** </ext:Toolbar>
*********************************************** </TopBar>
*************************************** <Body>
******************************************* <ext:ColumnLayout ID="ContactDetailsColumnLayout" runat="server" Margin="10" >
*********************************************** <ext:LayoutColumn ColumnWidth="0.50">
*************************************************** <ext:Panel runat="server" Border="false" Header="false">
******************************************************* <Body>
*********************************************************** <ext:FieldSet ID="userFS" 
******************************************************************* runat="server"
******************************************************************* Title="User Information"
******************************************************************* AutoHeight="true" BodyStyle="margin:5px;padding:5px;">
******************************************************************* <Body>
*********************************************************************** <ext:FormLayout ID="FormLayout1" runat="server">
*************************************************************************** <ext:Anchor Horizontal="95%">
******************************************************************************* <ext:TextField 
*********************************************************************************** ID="firstName" Enabled="true"
*********************************************************************************** runat="server" 
*********************************************************************************** FieldLabel="First Name"* />
*************************************************************************** </ext:Anchor>
*************************************************************************** <ext:Anchor Horizontal="95%">
*********************************************************************************** <ext:TextField 
*************************************************************************************** ID="middleName"
*************************************************************************************** Enabled="true"
*************************************************************************************** runat="server" 
*************************************************************************************** FieldLabel="Middle Name" />
*************************************************************************** </ext:Anchor>
*************************************************************************** <ext:Anchor Horizontal="95%">
*********************************************************************************** <ext:TextField 
*************************************************************************************** ID="lastName"
*************************************************************************************** Enabled="true"
*************************************************************************************** runat="server" 
*************************************************************************************** FieldLabel="Last Name" />
*************************************************************************** </ext:Anchor>
*************************************************************************** <ext:Anchor Horizontal="95%">
******************************************************************************* <ext:TextField 
*********************************************************************************** ID="companyName"
*********************************************************************************** runat="server" 
*********************************************************************************** Enabled="true"
*********************************************************************************** FieldLabel="Company Name" />
*************************************************************************** </ext:Anchor>
************************************************************************** *
*********************************************************************** </ext:FormLayout>
****************************************************************** </Body>
*********************************************************** </ext:FieldSet>
*********************************************************** <ext:FieldSet ID="contactFS" 
*************************************************************** runat="server"
*************************************************************** Title="Contact Details"
*************************************************************** AutoHeight="true" BodyStyle="margin:5px;padding:5px;">
*************************************************************** <Body>
******************************************************************* <ext:FormLayout ID="FormLayout3" runat="server">
*********************************************************************** <ext:Anchor Horizontal="%">
*************************************************************************** <ext:ComboBox FieldLabel="Influencer" ID="influencer" runat="server">
*************************************************************************** </ext:ComboBox>
*********************************************************************** </ext:Anchor>
*********************************************************************** <ext:Anchor Horizontal="95%">
******************************************************************************* <ext:TextField 
*********************************************************************************** ID="dm"
*********************************************************************************** Enabled="true"
*********************************************************************************** runat="server" 
*********************************************************************************** FieldLabel="Descision Maker" />
*********************************************************************** </ext:Anchor>
*********************************************************************** <ext:Anchor Horizontal="95%">
******************************************************************************* <ext:TextField 
*********************************************************************************** ID="status"
*********************************************************************************** Enabled="true"
*********************************************************************************** runat="server" 
*********************************************************************************** FieldLabel="Status" />
*********************************************************************** </ext:Anchor>
*********************************************************************** <ext:Anchor Horizontal="95%">
******************************************************************************* <ext:TextField 
*********************************************************************************** ID="primaryMarket"
*********************************************************************************** Enabled="true"
*********************************************************************************** runat="server" 
*********************************************************************************** FieldLabel="Primary Market" />
*********************************************************************** </ext:Anchor>
*********************************************************************** <ext:Anchor Horizontal="95%">
******************************************************************************* <ext:TextField 
*********************************************************************************** ID="secondaryMarket"
*********************************************************************************** Enabled="true"
*********************************************************************************** runat="server" 
*********************************************************************************** FieldLabel="Secondary Market" />
*********************************************************************** </ext:Anchor>
******************************************************************* </ext:FormLayout>
*************************************************************** </Body>
*************************************************************** </ext:FieldSet>**************** *
******************************************************* </Body>
*************************************************** </ext:Panel>
*********************************************** </ext:LayoutColumn>
*********************************************** <ext:LayoutColumn ColumnWidth="0.50">
*************************************************** <ext:FieldSet ID="FieldSet2" 
*************************************************************** runat="server"
*************************************************************** Title="Communication Information"
*************************************************************** AutoHeight="true" BodyStyle="margin:5px;padding:5px;">
*************************************************************** <Body>
******************************************************************* <ext:FormLayout ID="FormLayout2" runat="server">
*********************************************************************** <ext:Anchor Horizontal="95%">
*************************************************************************** <ext:TextField 
******************************************************************************* ID="mobilePhone" Enabled="true"
******************************************************************************* runat="server" 
******************************************************************************* FieldLabel="Mobile Phone"* />
*********************************************************************** </ext:Anchor>
*********************************************************************** <ext:Anchor Horizontal="95%">
******************************************************************************* <ext:TextField 
*********************************************************************************** ID="directPhone"
*********************************************************************************** Enabled="true"
*********************************************************************************** runat="server" 
*********************************************************************************** FieldLabel="Direct Phone" />
*********************************************************************** </ext:Anchor>
*********************************************************************** <ext:Anchor Horizontal="95%">
******************************************************************************* <ext:TextField 
*********************************************************************************** ID="emailAddress"
*********************************************************************************** Enabled="true"
*********************************************************************************** runat="server" 
*********************************************************************************** FieldLabel="Email Address (Primary)" />
*********************************************************************** </ext:Anchor>
********************************************************************** *
******************************************************************* </ext:FormLayout>
************************************************************** </Body>
************************************************************ </ext:FieldSet>
*********************************************** </ext:LayoutColumn>
******************************************* </ext:ColumnLayout>
*************************************** </Body>
*********************************** </ext:Panel>* *
******************************* </ext:FitLayout>
*************************** </Body>
*********************** </ext:Panel>
******************* </Center>
*************** </ext:BorderLayout>
*********** </Body>
******* </ext:ViewPort>
*** </asp:Content>
    Hope you can help.

    Best regards

    Steve
  2. #2
    Feb 03, 2009, 3:09 PM

    RE: [CLOSED] Multiple FieldSet within ColumnLayout

    Hi Steve,

    Don't use 'status' as ID because it is reserved word in javascript (i renamed your status to status1)

    Please see modified example:
    <%@ Page Language="C#" ValidateRequest="false" %>

<%@ 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 xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <ext:ViewPort ID="contactViewPort" runat="server">
        <Body>
            <ext:FitLayout ID="FitLayout2" runat="server">
                <ext:Panel ID="Panel2" BodyStyle="padding:5px;" runat="server" Border="false" AutoScroll="true">
                    <TopBar>
                        <ext:Toolbar ID="ToolBar1" runat="server">
                            <Items>
                                <ext:Button ID="btn_saveChanges" runat="server" Text="Save Changes" Icon="PageSave">
                                </ext:Button>
                                <ext:Button ID="btn_openCompany" runat="server" Text="Open Company" Icon="BuildingGo">
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Body>
                        <ext:ColumnLayout ID="ContactDetailsColumnLayout" runat="server">
                            <ext:LayoutColumn ColumnWidth="0.50">
                                <ext:Panel ID="Panel3" runat="server" Border="false" Header="false">
                                    <Body>
                                        <ext:FormLayout runat="server">
                                            <ext:Anchor Horizontal="95%">
                                                <ext:FieldSet ID="userFS" runat="server" Title="User Information" AutoHeight="true"
                                                    BodyStyle="margin:5px;padding:5px;">
                                                    <Body>
                                                        <ext:FormLayout ID="FormLayout1" runat="server">
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="firstName" Enabled="true" runat="server" FieldLabel="First Name" />
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="middleName" Enabled="true" runat="server" FieldLabel="Middle Name" />
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="lastName" Enabled="true" runat="server" FieldLabel="Last Name" />
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="companyName" runat="server" Enabled="true" FieldLabel="Company Name" />
                                                            </ext:Anchor>
                                                        </ext:FormLayout>
                                                    </Body>
                                                </ext:FieldSet>
                                            </ext:Anchor>
                                            <ext:Anchor Horizontal="95%">
                                                <ext:FieldSet ID="contactFS" runat="server" Title="Contact Details" AutoHeight="true"
                                                    BodyStyle="margin:5px;padding:5px;">
                                                    <Body>
                                                        <ext:FormLayout ID="FormLayout3" runat="server">
                                                            <ext:Anchor Horizontal="%">
                                                                <ext:ComboBox FieldLabel="Influencer" ID="influencer" runat="server">
                                                                </ext:ComboBox>
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="dm" Enabled="true" runat="server" FieldLabel="Descision Maker" />
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="status1" Enabled="true" runat="server" FieldLabel="Status" />
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="primaryMarket" Enabled="true" runat="server" FieldLabel="Primary Market" />
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="secondaryMarket" Enabled="true" runat="server" FieldLabel="Secondary Market" />
                                                            </ext:Anchor>
                                                        </ext:FormLayout>
                                                    </Body>
                                                </ext:FieldSet>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </Body>
                                </ext:Panel>
                            </ext:LayoutColumn>
                            <ext:LayoutColumn ColumnWidth="0.50">
                                <ext:Panel ID="Panel4" runat="server" Border="false" Header="false">
                                    <Body>
                                        <ext:FormLayout runat="server">
                                            <ext:Anchor Horizontal="95%">
                                                <ext:FieldSet ID="FieldSet2" runat="server" Title="Communication Information" AutoHeight="true"
                                                    BodyStyle="margin:5px;padding:5px;">
                                                    <Body>
                                                        <ext:FormLayout ID="FormLayout2" runat="server">
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="mobilePhone" Enabled="true" runat="server" FieldLabel="Mobile Phone" />
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="directPhone" Enabled="true" runat="server" FieldLabel="Direct Phone" />
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="95%">
                                                                <ext:TextField ID="emailAddress" Enabled="true" runat="server" FieldLabel="Email Address (Primary)" />
                                                            </ext:Anchor>
                                                        </ext:FormLayout>
                                                    </Body>
                                                </ext:FieldSet>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </Body>
                                </ext:Panel>
                            </ext:LayoutColumn>
                        </ext:ColumnLayout>
                    </Body>
                </ext:Panel>
            </ext:FitLayout>
        </Body>
    </ext:ViewPort>
    </form>
</body>
</html>

  3. #3
    Feb 03, 2009, 3:35 PM

    RE: [CLOSED] Multiple FieldSet within ColumnLayout

    Unbelievable! I'd have never spotted that. Full marks to Vladimir again. I can't catch you out, can I?

    Steve

Similar Threads

  1. Fieldset padding inside a ColumnLayout
    By Coltonis in forum 1.x Help
    Replies: 0
    Last Post: Jul 09, 2010, 1:13 AM
  2. [CLOSED] [1.0] ColumnLayout in FieldSet
    By rcaunt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 04, 2010, 1:50 PM
  3. [CLOSED] FieldSet and ColumnLayout
    By HOWARDJ in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 29, 2009, 6:06 AM
  4. A few bugs with ColumnLayout inside FieldSet
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: May 06, 2009, 2:13 PM
  5. Multiple columns inside a Fieldset
    By ryanf in forum 1.x Help
    Replies: 0
    Last Post: Dec 17, 2008, 2:34 PM

Posting Permissions