[1.0] IE8 with no compatibility view - auto height problem.

  1. #1

    [1.0] IE8 with no compatibility view - auto height problem.

    Hello,

    I've got my site build on Ext.net 1.0 preview and I'm dealing with following problem. When I use Internet Explorer 8 without compatibility view (which should be okay because as far as I know you support IE8) my textboxes and all other form elements are all in one place, like on a pile. Example:



    My code for this form looks following:

     <ext:Viewport runat="server">
            <Content>
                <ext:FormPanel Icon="UserSuitBlack" AutoDoLayout="true" runat="server" />
                <ext:Window AutoHeight="true" Padding="15" Width="300" Title="<%$ Resources:Titles, Login %>" Icon="Lock" Closable="false" Modal="true" runat="server">
                    <Content>
                        <ext:TextField ID="tfLogin" runat="server" FieldLabel="<%$ Resources:Labels, Login %>" />
                        <ext:TextField ID="tfPassword"  runat="server" InputType="Password" FieldLabel="<%$ Resources:Labels, Password %>" />
                        <sc:LanguageSelect ID="lsLanguage"  runat="server" FieldLabel="<%$ Resources:Labels, Language %>" />
                    </Content>
                    <Buttons>
                        <ext:Button ID="btnLogin" Text="<%$ Resources:Actions, Login %>" runat="server" />
                    </Buttons>
                </ext:Window>
            </Content>
        </ext:Viewport>
    Now when I set AutoHeight="true" for every input on my page, then it looks okay, like this:



    Problem is that in my application i have hundreds of textboxes, spinner fields etc, and I do not want to add extra attribute to any of them. Is there some workaround for this problem/bug? Will new version from SVN helps (we want to buy your product)?

    Regards
  2. #2
    Hi,

    1. Move Window outside ViewPort
    2. Use Items instead Content in the Window
    3. Use Items instead Content in the ViewPort
    4. Add Layout="Form" to the window
  3. #3
    Hi lukasw,

    Here's your code with the modifications suggested by Vladimir above.

    Example

    <ext:Viewport runat="server">
        <Items>
            <ext:FormPanel runat="server" Icon="UserSuitBlack" AutoDoLayout="true" />
        </Items>
    </ext:Viewport>
    
    <ext:Window 
        runat="server"
        AutoHeight="true" 
        Padding="15" 
        Width="300" 
        Title="<%$ Resources:Titles, Login %>" 
        Icon="Lock" 
        Closable="false" 
        Modal="true"
        Layout="form">
        <Items>
            <ext:TextField ID="tfLogin" runat="server" FieldLabel="<%$ Resources:Labels, Login %>" />
            <ext:TextField ID="tfPassword"  runat="server" InputType="Password" FieldLabel="<%$ Resources:Labels, Password %>" />
            <sc:LanguageSelect ID="lsLanguage"  runat="server" FieldLabel="<%$ Resources:Labels, Language %>" />
        </Items>
        <Buttons>
            <ext:Button ID="btnLogin" Text="<%$ Resources:Actions, Login %>" runat="server" />
        </Buttons>
    </ext:Window>
    Hope this helps.
    Geoffrey McGill
    Founder
  4. #4

    Display problems with IE6

    Hi,

    In the attached image, the first form is displayed correctly using Internet Explorer 8.
    The second image is displayed incorrectly using Internet Explorer 6 OR Internet Explorer 7.
    Note also that I have no problem with Firefox or Chrome.

    This is my code:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script type="text/javascript" src="/TimeEasy/Content/js/BF.GridEditor.js"></script>
    <ext:Window 
        ID="WinEditor" 
        runat="server" 
        Title="Nazioni" 
        Icon="ApplicationFormEdit" 
        Width="600" 
        Height="224" 
        Modal="true"
        Hidden="true"
        Resizable="false"
        Layout="Fit"
        AutoRender="false">
        <Items>
            <ext:FormPanel ID="MainFormPanel"
                           runat="server" 
                           Border="false"  
                           MonitorValid="true"
                           MonitorPoll="500"
                           BodyStyle="background-color:transparent;"
                           Layout="Fit"
                           LabelSeparator=""
                           TrackResetOnLoad="true"
                           Url="~/Country/SaveCountry/">
                <TopBar> 
                    <ext:Toolbar ID="TopBar" runat="server" EnableOverflow="false">
                        <Items>
                            <ext:Button ID="ToolbarButtonAdd" runat="server" Text="Nuovo" Icon="Add">
                                <Listeners>
                                    <Click Handler="XContext.onButtonAdd();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="ToolbarButtonSave" runat="server" Text="Salva" Icon="Disk">
                                <Listeners>
                                    <Click Handler="XContext.onButtonSave();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="ToolbarButtonSaveExit" runat="server" Text="Salva ed Esci" Icon="DiskUpload">
                                <Listeners>
                                    <Click Handler="XContext.onButtonSaveExit();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="ToolbarButtonSaveAdd" runat="server" Text="Salva e Nuovo" Icon="DiskDownload">
                                <Listeners>
                                    <Click Handler="XContext.onButtonSaveAdd();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="ToolbarButtonCancel" runat="server" Text="Annulla" Icon="ArrowUndo">
                                <Listeners>
                                    <Click Handler="XContext.onButtonCancel();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="ToolbarButtonExit" runat="server" Text="Esci" Icon="ArrowLeft">
                                <Listeners>
                                    <Click Handler="XContext.onButtonExit();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:TabPanel
                        ID="MainTabPanel" 
                        runat="server" 
                        Border="false" 
                        BodyStyle="background-color:transparent;"
                        DeferredRender="false"
                        LayoutOnTabChange="true">
                        <Items>
                            <ext:Panel 
                                ID="PanelGeneral" 
                                runat="server" 
                                Title="Generale" 
                                Icon="User"
                                Border="false"
                                BodyStyle="padding:17px 10px 17px 10px;background-color:transparent;"
                                Layout="Form">
                                <Items>
                                    <ext:NumberField
                                        ID="IdField"
                                        DataIndex="CountryId"
                                        runat="server"
                                        FieldLabel="ID"
                                        AllowBlank="false"
                                        AnchorHorizontal="100%" />
                                    <ext:TextField
                                        ID="DescriptionField"
                                        DataIndex="CountryName"
                                        runat="server"
                                        FieldLabel="Descrizione"
                                        MaxLength="80"
                                        AllowBlank="false"
                                        AnchorHorizontal="100%" />
                                    <ext:Container ID="DummyContainer2" runat="server" Layout="Column" Height="27">
                                        <Items>
                                            <ext:TextField
                                                ID="Alpha2Code"
                                                DataIndex="Alpha2Code"
                                                runat="server"
                                                FieldLabel="Codice ISO-2"
                                                MaxLength="2"
                                                AllowBlank="false"
                                                Width="90"
                                                AnchorHorizontal="100%"
               ColumnWidth=".50"
                                                StyleSpec="text-transform:uppercase;"/>
                                            <ext:TextField
                                                ID="Alpha3Code"
                                                DataIndex="Alpha3Code"
                                                runat="server"
                                                FieldLabel="Codice ISO-3"
                                                MaxLength="3"
                                                AllowBlank="false"
                                                Width="90"
                                                AnchorHorizontal="100%"
               ColumnWidth=".50"
               LabelWidth="85"
               LabelAlign="Right"
                                                LabelPad="15"
                                                StyleSpec="text-transform:uppercase;"/>
                                        </Items>
                                    </ext:Container>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
                <BottomBar>
                    <ext:Toolbar ID="NavigationToolbar" runat="server">
                        <Items>
                            <ext:Button ID="btnNavFirst" runat="server" Icon="ResultsetFirst" ToolTip="Prima Riga">
                                <Listeners>
                                    <Click Handler="XContext.first();" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:Button ID="btnNavPrevious" runat="server" Icon="ResultsetPrevious" ToolTip="Riga Precedente">
                                <Listeners>
                                    <Click Handler="XContext.previous();" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:Button ID="btnNavNext" runat="server" Icon="ResultsetNext" ToolTip="Riga Successiva">
                                <Listeners>
                                    <Click Handler="XContext.next();" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:Button ID="btnNavLast" runat="server" Icon="ResultsetLast" ToolTip="UltimaRiga">
                                <Listeners>
                                    <Click Handler="XContext.last();" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
                <Listeners>
                    <ClientValidation Fn="XContext.setToolbarButtons" />
                </Listeners>
            </ext:FormPanel>
        </Items>
     
    </ext:Window>
    Bye,
    Stefano
  5. #5
    I had the same problem and solve it with this

    <ext:Window ID="Window_Editevent" AutoHeight="true" runat="server" Resizable="false" Title="Evento Calendario" Icon="Calendar" Closable="false" ButtonAlign="Center" Hidden="true" Width="600" Height="485">
    -AutoHeight="true"
    Last edited by geoffrey.mcgill; Sep 01, 2011 at 6:17 PM. Reason: please use [CODE] tags

Similar Threads

  1. Vertical Auto Height
    By Zdenek in forum 1.x Help
    Replies: 5
    Last Post: Dec 01, 2011, 8:34 PM
  2. problem with ext panel auto height
    By venu.sn2009 in forum 1.x Help
    Replies: 2
    Last Post: Aug 10, 2011, 8:12 AM
  3. How to set auto height for a panel?
    By ganesh.tony in forum 1.x Help
    Replies: 0
    Last Post: Jul 01, 2011, 5:26 AM
  4. Compatibility view issue in IE 8 and Mozilla
    By Nagaraj K Hebbar in forum 1.x Help
    Replies: 12
    Last Post: Jan 14, 2010, 11:36 PM
  5. [CLOSED] Auto Height
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 19, 2008, 6:43 AM

Posting Permissions