[CLOSED] MVC, Controls not aligning as expected

[RCM]

Hi,

I am trying to force the labelAlign property on panel with layout="Form" to left align but the controls on the panel are not being properly aligned.

The see the items on the Panel named "panelSettings". Please advise if I am doingsomething wrong.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Window ID="winNewSchedule" runat="server" Title="New Task" Icon="Application" AutoDataBind="true" Width="800" Height="450" Border="false" Closable="false"
    Draggable="true" Modal="true" CloseAction="Close" IDMode="Explicit" Resizable="false" Layout="fit">    
        <Items>
            <ext:GroupTabPanel ID="grouptabMain" Cls="vertical-tabs" runat="server" TabWidth="150" ActiveGroupIndex="0" Padding="3" Margins="5" LabelAlign="Top">
                <Groups>
                     <ext:GroupTab ID="GroupGeneralGroup" runat="server" MainItem="0" Expanded="False" Frame="True" HeaderAsText="True" HideBorders="False">
                        <Items>

                          <ext:Panel ID="GroupPackage"  runat="server" Title="Package" TabTip="Package" Layout="FitLayout">
                            <Items>
                                <ext:Panel runat="server" Margins="10" Layout="form" LabelAlign="top" HideBorder="true" Border="false"  BodyStyle="padding:20px 15px 20px 15px">
                                    <Items>
                                        <ext:ComboBox runat="server" ID="cbDataEngine" FieldLabel ="Data engine" AnchorHorizontal ="70%">
                                        </ext:ComboBox>
                                        <ext:ComboBox runat="server" ID="cbPackage" FieldLabel ="Package" AnchorHorizontal ="70%">
                                        </ext:ComboBox>
                                        <ext:Panel runat="server" Height="200" Border="false"  AnchorHorizontal ="100%">
                                            <Items>
                                                <ext:BorderLayout runat="server">
                                                    <West MarginsSummary="5 5 0 0">
                                                        <ext:Panel runat="server" Layout="Fit" Width="200">
                                                            <Items>
                                                                <ext:GridPanel  runat="server" Title="Scripts" StripeRows="true" ID="gpScripts">
                                                                    <Store>
                                                                        <ext:Store IDMode="Explicit" runat="server">
                                                                            <Reader>
                                                                                <ext:JsonReader Root="data">
                                                                                    <Fields>
                                                                                        <ext:RecordField Name="Name" />
                                                                                    </Fields>
                                                                                </ext:JsonReader>
                                                                            </Reader>
                                                                        </ext:Store>
                                                                    </Store>
                                                                    <ColumnModel runat="server">
                                                                        <Columns>
                                                                            <ext:Column MenuDisabled="true" DataIndex="Name" Header="Name" />
                                                                        </Columns>
                                                                    </ColumnModel>
                                                                </ext:GridPanel>
                                                            </Items>
                                                        </ext:Panel>
                                                    </West>
                                                    <Center MarginsSummary="5 5 0 0">
                                                        <ext:Panel runat="server" Title="Script settings" Layout="Fit">
                                                            <Items>
                                                                <ext:Panel ID="panelSettings" runat="server" Layout="Form"  LabelAlign="left">
                                                                    <Items>
                                                                        <ext:SpinnerField ID="SpinnerField1" runat="server" FieldLabel="Age" />
                                                                        <ext:ComboBox runat="server" ID="cbDataEngine2" FieldLabel ="Data engine" AnchorHorizontal="92%">
                                                                        </ext:ComboBox>
                                                                    </Items>
                                                                </ext:Panel>
                                                            </Items>
                                                        </ext:Panel>
                                                    </Center>
                                                </ext:BorderLayout>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                </ext:Panel>
                            </Items>
                          </ext:Panel>                     

                          <ext:Panel ID="GroupGeneral"  runat="server" Title="General" TabTip="General" Layout="FitLayout">
                            <Items>
                                <ext:Panel runat="server" Margins="10" Layout="form" LabelAlign="top" HideBorder="true" Border="false"  BodyStyle="padding:20px 15px 20px 15px">
                                    <Items>
                                        <ext:TextField ID="txtTaskName" runat = "server" FieldLabel="Name" AnchorHorizontal = "100%" >
                                        </ext:TextField>
                                        <ext:TextArea ID="taDescription" runat = "server" FieldLabel ="Description" AnchorHorizontal = "100%">
                                        </ext:TextArea>
                                        <ext:RadioGroup 
                                            runat="server" 
                                            FieldLabel="Perform this task" 
                                            ColumnsNumber="1" 
                                            AnchorHorizontal ="100%"
                                            ItemCls="x-check-group-alt">
                                            <Items>
                                                <ext:Radio ID="radioDaily" runat="server" BoxLabel="Daily" />
                                                <ext:Radio ID="radioWeekly" runat="server" BoxLabel="Weekly" Checked="true" />
                                                <ext:Radio ID="radioMonthly" runat="server" BoxLabel="Monthly" />
                                                <ext:Radio ID="radioOneTime" runat="server" BoxLabel="One time only" />
                                            </Items>
                                        </ext:RadioGroup> 
                                    </Items>
                                </ext:Panel>
                            </Items>
                          </ext:Panel>                     
                        </Items>
                     </ext:GroupTab>
                </Groups>            
            </ext:GroupTabPanel>
        </Items>   
        <Tools>
            <ext:Tool Type="Help" Qtip="Help" />
        </Tools>
        <Buttons>
        <ext:Button ID="btnPreviousNewResultSet" runat="server" Text="Previous" AutoDataBind="true" Disabled="true"
                TabIndex="11">
                <Listeners>
              
                    <Click Handler="" />
                </Listeners>
            </ext:Button>
            <ext:Button ID="btnNextNewResultSet" runat="server" Text="Next" AutoDataBind="true"
                TabIndex="12">
                <Listeners>
                    <Click Handler="" />
                </Listeners>
            </ext:Button>
            <ext:Button ID="btnSaveNewResultSet" runat="server" Text="OK" AutoDataBind="true"
                Disabled="true" TabIndex="13">
                <Listeners>
                    <Click Handler="" />
                </Listeners>
            </ext:Button>
            <ext:Button ID="Button1" runat="server" Text="Cancel" AutoDataBind="true"
                TabIndex="14">
                <Listeners>
                    <Click Handler="" />
                </Listeners>
            </ext:Button>
        </Buttons>
</ext:Window>

[Daniil]

Hi,

I'd consider it a bug, but we should investigate further.

Here is the test case to reproduce the problem.

Example

<%@ 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 runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Container 
            runat="server" 
            Width="400" 
            Height="400" 
            Layout="FormLayout" 
            LabelAlign="top">
            <Items>
                <ext:TextField runat="server" FieldLabel="On top" />
                <ext:Container 
                    runat="server" 
                    Anchor="100% 100%" 
                    Layout="FormLayout">
                    <Items>
                        <ext:SpinnerField runat="server" FieldLabel="Misaligned" />
                        <ext:ComboBox runat="server" FieldLabel="Misaligned" />
                    </Items>
                </ext:Container>
            </Items>
        </ext:Container>
    </form>
</body>
</html>

[RCM]

Is there a workaround you can recommend?

[Daniil]

Here is the fixed example.

Example

<%@ 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 runat="server">
    <title>Ext.Net Example</title>

    <style type="text/css">
        .x-form-label-left .x-form-item label.x-form-item-label {
            float: left;
            margin-bottom: 0px;
        }
        
        .x-form-label-left .x-form-element {
            padding-top: 0px;
        }
        
        .x-form-label-left .x-form-item {
            padding-bottom: 0px;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Container 
            runat="server" 
            Width="400" 
            Height="400" 
            Layout="FormLayout" 
            LabelAlign="Top">
            <Items>
                <ext:TextField runat="server" FieldLabel="On top" />
                <ext:Container 
                    runat="server" 
                    Anchor="100% 100%" 
                    Layout="FormLayout"
                    Cls="x-form-label-left">
                    <CustomConfig>
                        <ext:ConfigItem Name="LabelAlign" Value="left" Mode="Value" />
                    </CustomConfig>
                    <Items>
                        <ext:SpinnerField runat="server" FieldLabel="Left" />
                        <ext:ComboBox runat="server" FieldLabel="Left" />
                    </Items>
                </ext:Container>
            </Items>
        </ext:Container>
    </form>
</body>
</html>

The fix is:

1. This Cls

Cls="x-form-label-left"

and this CustomConfig:

<CustomConfig>
    <ext:ConfigItem Name="LabelAlign" Value="left" Mode="Value" />
</CustomConfig>

for a container with misaligned FieldLabel-s.

2. These CSS rules:

<style type="text/css">
    .x-form-label-left .x-form-item label.x-form-item-label {
        float: left;
        margin-bottom: 0px;
    }
        
    .x-form-label-left .x-form-element {
        padding-top: 0px;
    }
        
    .x-form-label-left .x-form-item {
        padding-bottom: 0px;
    }
</style>

[RCM]

Hi,

The code above worked. I am trying to force the final two items (checkboxes) in the layout below to align the labels to the right. please ofer some assistance. the spinner fields labels are top aligned.

                                                <ext:Panel runat="server" Region="Center"   MarginsSummary="5 5 0 0"  Title="Script settings" Layout="Fit">
                                                    <Items>
                                                        <ext:Panel ID="panelSettings" runat="server"   PaddingSummary="5 5 5 5"  Layout="Form"  LabelAlign="top">
                                                            <CustomConfig>
                                                                <ext:ConfigItem Name="LabelAlign" Value="top"  Mode="Value" />
                                                            </CustomConfig>
                                                            <Items>
                                                                <ext:SpinnerField runat="server" ID="sfMaximumRunTime" AnchorHorizontal="15%"  Width="50" FieldLabel="Maximum run time" />
                                                                <ext:SpinnerField runat="server" ID="sfRetryAttempts" AnchorHorizontal="15%"  FieldLabel="Retry attempts" />
                                                                <ext:SpinnerField runat="server" ID="sfRetryDelay" AnchorHorizontal="15%" FieldLabel="Retry delay" />
                                                               <ext:Checkbox runat="server" ID="cbContinueIfPreviousScriptFail" LabelAlign="right" FieldLabel ="Continue if previous script fail." />
                                                               <ext:Checkbox runat="server" ID="cbIgnorePreviousRunDate" LabelAlign="right" FieldLabel ="Continue if previous script fail." />
                                                            </Items>
                                                        </ext:Panel>
                                                    </Items>
                                                </ext:Panel>

[Daniil]

The LabelAlign property is a container's one, not a field's one.

For a Checkbox you can set up BoxLabel instead of FieldLabel.

<ext:Checkbox runat="server" BoxLabel="BoxLabel" />

You might need to set up HideLabel="true" also.

<ext:Checkbox runat="server" BoxLabel="BoxLabel" HideLabel="true" />