[CLOSED] IE7 Issues: Hide Note

  1. #1

    [CLOSED] IE7 Issues: Hide Note

    In IE8+, Chrome and Firefox the following code works fine. When I show/hide the radiobox notes the dialog will resize properly. In IE7 when I hide the notes the dialog will not resize. Any thoughts?

    I am testing this in IE11 - Document Mode 7.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                    PopulateCategories();
            }
    
            // Populate the Request Types in a readio group 
            private void PopulateCategories()
            {
                List<RequestTypes> reqTypes = new List<RequestTypes>();
    
                reqTypes.Add(new RequestTypes { Id = 1, Caption = "Baselines", Description = "Blah ...  Blah ... Blah ..." });
                reqTypes.Add(new RequestTypes { Id = 1, Caption = "Archives", Description = "More descriptions ..." });
                reqTypes.Add(new RequestTypes { Id = 1, Caption = "Reference", Description = "And final the last description." });
    
                // Build individual radio buttons for each request type
                foreach (var reqType in reqTypes)
                {
                    Radio option = new Radio();
                    option.Name = "Categories";
                    option.BoxLabel = reqType.Caption;
                    option.InputValue = reqType.Caption;
                    option.Tag = reqType.Id;
                    option.CheckedCls = "NewCategory-Checked x-form-cb-checked";
    
                    // Add a notes to display a description if it exists
                    if (!String.IsNullOrEmpty(reqType.Description))
                    {
                        option.Note = reqType.Description;
                        option.NoteAlign = NoteAlign.Down;
                        option.NoteCls = "NewCategory-FieldNote";
                    }
    
                    // Add the radion button to the group
                    CategoriesGroup.Add(option);
                }
            }
            public class RequestTypes
            {
                public int Id {get; set;}
                public string Caption { get; set; }
                public string Description { get; set; }
            }
    </script>
    <head runat="server">
        <title></title>
        <style type="text/css">
            .NewCategory-Checked .x-form-cb-label {
                font-weight: bold !important;
            }
    
            .NewCategory-FieldNote {
                font-size: 11px;
                margin: -4px 15px 6px 18px;
                color: Navy;
            }
    
            .NewCategory-DisplayCheckbox {
                font-size: 10px !important;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <form runat="server">
            <ext:Button runat="server" Text="Show Categories" OnClientClick="App.RequestCategoriesDialog.show();" />
            <ext:Window ID="RequestCategoriesDialog" runat="server" ClientIDMode="Static" Title="New Request: Categories"
                Icon="ApplicationFormAdd" Width="800" Layout="FitLayout" Resizable="false" Modal="true"
                Border="false" DefaultRenderTo="Body" Constrain="true" CloseAction="Hide" Closable="false"
                Hidden="true">
                <HtmlBin>
                    <script type="text/javascript">
                        // Toggle the Radio button notes based on user preference
                        function toggleCategoryDescriptions(chkbox, checked) {
                            App.CategoriesGroup.cascade(
                                function toggleNote(radio)
                                { if (checked) radio.showNote(); else radio.hideNote(); });
                            App.RequestCategoriesDialog.doLayout();
                        }
                    </script>
                </HtmlBin>
                <Items>
                    <ext:FormPanel ID="FormPanel" runat="server" BodyPadding="8" AutoScroll="true">
                        <Items>
                            <ext:Label runat="server" Text="Select a category then press the 'Initiate Request' button." />
                            <ext:Container runat="server" Html="<hr/>" MarginSpec="0 0 5 0" />
                            <ext:RadioGroup ID="CategoriesGroup" runat="server" ClientIDMode="Static" ColumnsNumber="2"
                                Vertical="true" AllowBlank="false" MarginSpec="0 0 15 20" />
                            <ext:Container runat="server" Html="<hr/>" />
                            <ext:FieldContainer runat="server" Layout="HBoxLayout" MarginSpec="-5 0 -5 0">
                                <Items>
                                    <ext:Checkbox runat="server" BoxLabel="Display category descriptions." Checked="true"
                                        BoxLabelCls="NewCategory-DisplayCheckbox">
                                        <Listeners>
                                            <Change Fn="toggleCategoryDescriptions" />
                                        </Listeners>
                                    </ext:Checkbox>
                                </Items>
                            </ext:FieldContainer>
                        </Items>
                    </ext:FormPanel>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Cancel" Icon="BulletCross" OnClientClick="App.RequestCategoriesDialog.close();" />
                </Buttons>
            </ext:Window>
        </form>
    </body>
    </html>
    Last edited by Daniil; Nov 28, 2014 at 2:53 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    This appears to help. Please try.
    Ext.form.field.Base.override({
        showNote : function () {
            if (!Ext.isEmpty(this.note, false) && this.noteEl) {
                this.noteEl.removeCls("x-hide-" + this.hideMode);
    
                if (Ext.isIE7) {
                    this.noteEl.parent("tr").removeCls("x-hide-" + this.hideMode);
                }
            }
        },
    
        hideNote : function () {
            if (!Ext.isEmpty(this.note, false) && this.noteEl) {
                this.noteEl.addCls("x-hide-" + this.hideMode);
                        
                if (Ext.isIE7) {
                    this.noteEl.parent("tr").addCls("x-hide-" + this.hideMode);
                }
            }
        }
    });
  3. #3
    Thank you very much. Please close the thread. You can change the title to "IE7 Issue: Hide Note"

    I am in the final two weeks of user acceptance testing before the application is finally released. 19% of our user hits are still coming from IE7, thus we are testing against IE7 and finding just minor issues, so far. 34% of our user hits are coming from IE8.
    Last edited by cwolcott; Nov 28, 2014 at 2:50 PM.
  4. #4
    Wish you IE7 is gone finally as well as IE6 is.

Similar Threads

  1. [OPEN] [#583] Draw Examples Issues
    By cwolcott in forum 3.x Premium Help
    Replies: 7
    Last Post: Dec 08, 2014, 3:30 PM
  2. doLayout after update?
    By glenh in forum 2.x Help
    Replies: 0
    Last Post: Aug 29, 2013, 2:17 AM
  3. Replies: 1
    Last Post: Jun 10, 2010, 12:28 PM
  4. Tab Issues
    By dukefama in forum 1.x Help
    Replies: 1
    Last Post: Oct 14, 2008, 7:57 AM
  5. Tab and Issues
    By dukefama in forum 1.x Help
    Replies: 6
    Last Post: Jul 04, 2008, 3:47 AM

Posting Permissions