[CLOSED] DateField problem with calendar in IE10

[Bert76]

Hi guys,
I ran into another small problem, with a DateField this time. For some reason in IE10 with compatibility mode off the calendar drop down shows up but only as wide as the field itself which is a problem for forms where space is limited (which is the case for the form I'm working on).

Here is a screenshot and a code snippet of my Tab:

<ext:Panel
    ID="tabGeneral"
    runat="server" 
    Title="General"
    Layout="ColumnLayout" 
    BodyStyle="padding:10px;">
    <Items>
        <ext:Container ID="ContainerGeneralColumn1" runat="server" LabelAlign="Top" Layout="FormLayout" ColumnWidth=".2">
            <Items>
                <ext:TextField ID="txtMasterPostingID" runat="server" FieldLabel="Original Posting #" ReadOnly="true" Text="" StyleSpec="background:#E5E5E5;" Width="60" MaxLength="10" />
                <ext:DateField 
                        runat="server"
                        ID="txtStartDate" 
                        Vtype="daterange"
                        Format="dd/MM/yyyy"
                        AltFormats="dd-MM-yyyy|d-M-yy|d-M-yyyy|yyyy-MM-dd|yyyy-M-d"
                        FieldLabel="Start of Posting"
                        Width="120">
                        <Listeners>
                            <Render Handler="this.endDateField = '#{txtEndDate}'" />
                        </Listeners>
                    </ext:DateField>
                    <ext:DateField 
                        runat="server" 
                        ID="txtEndDate"
                        Vtype="daterange"
                        Format="dd/MM/yyyy"
                        AltFormats="dd-MM-yyyy|d-M-yy|d-M-yyyy|yyyy-MM-dd|yyyy-M-d"
                        FieldLabel="End of Posting"
                        Width="120">
                        <Listeners>
                            <Render Handler="this.startDateField = '#{txtStartDate}'" />
                        </Listeners>
                    </ext:DateField>     
                    <ext:ComboBox 
                        ID="cbPostingLanguage"
                        runat="server" 
                        FieldLabel="Posting Language"
                        Width="120"
                        StoreID="stoPostingLanguageList"
                        Editable="true"
                        DisplayField="CodeValue"
                        ValueField="CodeName"
                        TypeAhead="true" 
                        Mode="Local"
                        ForceSelection="true"
                        TriggerAction="All"
                        EmptyText="Select..."
                        SelectOnFocus="true">
                        <DirectEvents>
                            <Select OnEvent="cbPostingLanguage_ItemSelected" />
                        </DirectEvents>
                    </ext:ComboBox>
            </Items>
        </ext:Container>                                
        <ext:Container ID="ContainerGeneralColumn2" runat="server" LabelWidth="125" LabelAlign="Top" Layout="FormLayout" ColumnWidth=".27">
                <Items>
                    <ext:TextField ID="txtCourseCode" runat="server" StyleSpec="background-color:#FFFF99;" FieldLabel="Course Code" AllowBlank="false" Width="180" MaxLength="8">
                        <DirectEvents>
                            <Change OnEvent="txtCourseCode_Change" />
                        </DirectEvents>
                    </ext:TextField>

                    <ext:TextArea ID="txtCourseTitle" runat="server" FieldLabel="Course Title" AllowBlank="false" Height="65" Width="180" MaxLength="250" />
                    <ext:RadioGroup ID="rgrpStaffStatus" runat="server" FieldLabel="Course Limited To" ColumnsNumber="2" Width="140">
                        <Items>
                            <ext:Radio ID="optRegular" runat="server" BoxLabel="Regular" Checked="true" />
                            <ext:Radio ID="optStudent" runat="server" BoxLabel="Student" />
                        </Items> 
                    </ext:RadioGroup>                                                        
                </Items>
            </ext:Container>
        <ext:Container ID="ContainerGeneralColumn3" runat="server" LabelWidth="75" LabelAlign="Top" Layout="FormLayout" ColumnWidth=".08">
                <Items>
                    <ext:TextField ID="txtSection" runat="server" FieldLabel="Section" Width="25" MaxLength="2" />
                </Items>
            </ext:Container>
        <ext:Container ID="ContainerGeneralColumn4" runat="server" LabelWidth="75" LabelAlign="Top" Layout="FormLayout" ColumnWidth=".2">
            <Items>
                <ext:TextArea ID="txtCourseDescription" runat="server" FieldLabel="Course Description" Height="170" Width="300" MaxLength="4000" />
            </Items>
        </ext:Container>
    </Items>
</ext:Panel>

[Baidaly]

Hello!

Please, try to add the following CSS:

.ext-ie .x-date-menu {
    width: 179px !important;
    height: 185px !important;
}

Also, it can be helpful to force IE10 work in IE9 Compatible mode using the following meta tag but we cannot guarantee anything:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

[Daniil]

Hi everybody,

I can reproduce it with the v1.6 release, but cannot with v1.7 and the latest from SVN.

IE10 support has been expanded since v1.6 and this specific issue has been fixed as well.

[Bert76]

How do I get a hold of 1.7?

[Daniil]

Here it is.

https://nuget.org/packages/Ext.NET/1.7.0
http://svn.ext.net/premium/tags/1.7.0/
http://ext.net/archives/1-7-0/Ext.NET.Pro.1.7.0.zip