[CLOSED] Nepture Theme rendering issue on IE8 Browser

  1. #1

    [CLOSED] Nepture Theme rendering issue on IE8 Browser

    Hi Support team,

    I'm working on one web application with Neptune theme but IE 8 has some rendering issues with this theme.
    I used a number field with hidetrigger option as true and I can't see the outline of the number field box.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication3.WebForm1" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Requisition Registration Form</title>
        <script src="../../resources/js/Share.js" type="text/javascript"></script>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style>
            /* Styling of global error indicator */
            .form-error-state {
                font-size: 11px;
                padding-left: 20px;
                height: 16px;
                line-height: 18px;
                background: no-repeat 0 0;
                cursor: default;
            }
    
            .form-error-state-invalid {
                color: #C30;
                background-image: url(../../../../icons/exclamation-png/ext.axd);
            }
    
            .form-error-state-valid {
                color: #090;
                background-image: url(../../../../icons/accept-png/ext.axd);
            }
    
            /* Error details tooltip */
            .errors-tip .error {
                font-style: italic;
            }
        </style>
        <script type="text/javascript">
            function updateErrorState(form) {
                var me = form,
                    errorCmp, fields, errors;
    
                if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads
                    errorCmp = me.down('#formErrorState');
                    fields = me.getForm().getFields();
                    errors = [];
                    fields.each(function (field) {
                        Ext.Array.forEach(field.getErrors(), function (error) {
                            errors.push({ name: field.getFieldLabel(), error: error });
                        });
                    });
                    setErrors(errorCmp, errors);
                    me.hasBeenDirty = true;
                }
            }
    
            function boxLabelClick(e) {
                var target = e.getTarget('.terms'),
                    win;
    
                e.preventDefault();
    
                if (target) {
                    App.direct.ShowTerms();
                }
            }
    
            function setErrors(cmp, errors) {
                var me = cmp,
                    baseCls = me.baseCls,
                    tip = me.tooltips[0];
    
                errors = Ext.Array.from(errors);
    
                // Update CSS class and tooltip content
                if (errors.length) {
                    me.addCls(baseCls + '-invalid');
                    me.removeCls(baseCls + '-valid');
                    me.update("Form has errors");
                    tip.setDisabled(false);
                    if (!tip.rendered) {
                        tip.show();
                    }
                    tip.update(me.bin[0].apply(errors));
                } else {
                    me.addCls(baseCls + '-valid');
                    me.removeCls(baseCls + '-invalid');
                    me.update("Form is valid");
                    tip.setDisabled(true);
                    tip.hide();
                }
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Neptune" DirectMethodNamespace="ProcurementX" />
        <form id="form1" runat="server">
            <div>
                <ext:Window ID="Window1" runat="server" Collapsible="true" Icon="Application" Title="Requisition Registration Window" Layout="FitLayout" Width="500">
                    <Items>
                        <ext:FormPanel
                            ID="FormPanel1"
                            runat="server"
                            BodyPadding="10"
                            BodyBorder="1"
                            DefaultAnchor="100%">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <FieldDefaults LabelAlign="Left" MsgTarget="None" InvalidCls="" />
                            <FieldDefaults 
                                LabelWidth="120"
                                LabelStyle="font-weight:bold;" />
                            <Listeners>
                                <FieldValidityChange Fn="updateErrorState" />
                                <FieldErrorChange Fn="updateErrorState" />
                            </Listeners>
    
                            <Items>
                                <ext:NumberField 
                                    ID="PriceField" 
                                    runat="server" 
                                    Name="Folder_Nbr" 
                                    MsgTarget="Side"  EmptyText="Type Folder Number" HideTrigger="true"
                                    AllowBlank="false"
                                    FieldLabel="Folder Number" 
                                    />
    
                                <ext:TextField ID="TextField2"
                                    runat="server"
                                    Name="email"
                                    Flex="1"
                                    FieldLabel="Email Address"
                                    AllowBlank="false"
                                    Vtype="email" />
    
                                <ext:TextField ID="TextField3"
                                    runat="server"
                                    Name="password1"
                                    FieldLabel="Password"
                                    Flex="1"
                                    InputType="Password"
                                    AllowBlank="false"
                                    MinLength="8" />
    
                                <ext:TextField ID="TextField4"
                                    runat="server"
                                    Name="password2"
                                    FieldLabel="Repeat Password" 
                                    Flex="1"
                                    InputType="Password"
                                    AllowBlank="false">
                                    <Validator Handler="return (value === this.previousSibling('[name=password1]').getValue()) ? true : 'Passwords do not match.';" />
                                </ext:TextField>
                            </Items>
    
                            <DockedItems>
                                <ext:Container ID="Container1"
                                    runat="server"
                                    Dock="Bottom"
                                    PaddingSpec="10 10 5">
    
                                    <LayoutConfig>
                                        <ext:HBoxLayoutConfig Align="Middle" />
                                    </LayoutConfig>
    
                                    <Items>
                                        <ext:Component ID="Component1"
                                            runat="server"
                                            ItemID="formErrorState"
                                            BaseCls="form-error-state"
                                            Flex="1">
                                            <Bin>
                                                <ext:XTemplate ID="XTemplate1" runat="server">
                                                    <Html>
                                                        <ul>
                                                            <tpl for=".">
                                                                <li>
                                                                    <span class="field-name">{name}</span> : <span class="error">{error}</span>
                                                                </li>
                                                            </tpl>
                                                        </ul>
                                                    </Html>
                                                </ext:XTemplate>
                                            </Bin>
                                            <ToolTips>
                                                <ext:ToolTip ID="ToolTip1"
                                                    runat="server"
                                                    Title="Error Details:"
                                                    AutoHide="false"
                                                    Anchor="top"
                                                    MinWidth="200"
                                                    MouseOffset="-11,-2"
                                                    Closable="true"
                                                    Disabled="true"
                                                    ConstrainPosition="false"
                                                    Cls="errors-tip" />
                                            </ToolTips>
                                        </ext:Component>
    
                                        <ext:Button ID="Button1"
                                            runat="server"
                                            FormBind="true"
                                            Disabled="true"
                                            Text="Submit Registration"
                                            Width="140">
                                            <Listeners>
                                                <Click Handler="var form = this.up('form').getForm(); if (form.isValid()) {Ext.Msg.alert('Submitted Values', form.getValues(true));}" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Container>
                            </DockedItems>
                        </ext:FormPanel>
                    </Items>
                </ext:Window>
            </div>
        </form>
    </body>
    </html>
    Click image for larger version. 

Name:	Number Field_render issue.png 
Views:	38 
Size:	6.8 KB 
ID:	6936Click image for larger version. 

Name:	Search field_render.png 
Views:	32 
Size:	22.7 KB 
ID:	6937

    Regards,

    Kevin
    Last edited by Baidaly; Sep 30, 2013 at 7:42 PM. Reason: [CLOSED]
  2. #2
    Hi Kevin,

    I cannot reproduce, I see the right border.

    I am testing with Ext.NET from SVN trunk. What version are you testing with?
  3. #3
    Hi Daniil,
    <?xml version="1.0" encoding="utf-8"?>
    <packages>
      <package id="Ext.NET" version="2.2.0.1" targetFramework="net40" />
      <package id="Ext.NET.Utilities" version="2.2.1" targetFramework="net40" />
      <package id="Newtonsoft.Json" version="4.5.11" targetFramework="net40" />
      <package id="Transformer.NET" version="2.1.1" targetFramework="net40" />
    </packages>
    This is version configuration on my project and I attached the IE version as well.

    Click image for larger version. 

Name:	IEVersion.png 
Views:	14 
Size:	78.0 KB 
ID:	6944

    Regards,

    Kevin

    Quote Originally Posted by Daniil View Post
    Hi Kevin,

    I cannot reproduce, I see the right border.

    I am testing with Ext.NET from SVN trunk. What version are you testing with?
    Last edited by Daniil; Sep 26, 2013 at 2:20 PM. Reason: Please use [CODE] tags
  4. #4
    Yes, I got it reproducible with the v2.2 release. It was fixed.

    If it is not an option to update, please try this fix.

    Fix
    <style>
        .x-theme-neptune .x-ie8 .x-form-trigger-wrap input.x-form-text {
            border-right-width: 1px !important;
        }
    </style>
  5. #5
    Thanks Daniil,

    I can see number field works fine but trigger on search box inside gridpanel doesn't work.

    Click image for larger version. 

Name:	StillError.jpg 
Views:	22 
Size:	40.6 KB 
ID:	6948

    Regards,

    Kevin

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Infinite Scrolling with remote filtering - Ext.NET Examples</title>
    
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var renderTopic = function(value, p, record) {
                return Ext.String.format(
                    '<a href="http://sencha.com/forum/showthread.php?p={1}" target="_blank">{0}</a>',
                    value,
                    record.getId()
                );
            };
    
            var searchFieldTriggerClick = function (field, trigger, index) {
                var me = field,
                    store = me.up("grid").getStore(),
                    value = me.getValue();
    
                if(index == 0){
                    me.setValue('');
                    store.clearFilter();                
                    trigger.hide();
                }
                else{
                    if (value.length > 0) {
                        // Param name is ignored here since we use custom encoding in the proxy.
                        // id is used by the Store to replace any previous filter
                        store.filter({
                            id: store.proxy.filterParam,
                            property: store.proxy.filterParam,
                            value: value
                        });                    
                        me.getTrigger(0).show();
                    }
                }
            };
    
            var onSpecialKey = function (field, e) {
                 if (e.getKey() === e.ENTER) { 
                    searchFieldTriggerClick(field, null, 1); 
                    e.stopEvent(); 
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Theme="Neptune" />
            
            <h1>Infinite Scrolling with remote filtering</h1>
            <p>Ext.NET 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
            <p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>        
            <p>A filtering UI is included which applies a remote filter and reloads the grid beginning at page one.</p>
            
            <ext:GridPanel 
                ID="GridPanel1"
                runat="server" 
                Width="700" 
                Height="500"        
                Collapsible="true"    
                Title="Sencha.com - Browse Forums">
                <Store>
                    <ext:Store 
                        runat="server" 
                        Buffered="true"
                        RemoteFilter="true"
                        LeadingBufferZone="1000" 
                        PageSize="50">
                        <Proxy>
                            <ext:JsonPProxy 
                                Url="http://www.sencha.com/forum/topics-remote.php" 
                                SimpleSortMode="true"                             
                                FilterParam="query">
                                <Reader>
                                    <ext:JsonReader Root="topics" TotalProperty="totalCount" />
                                </Reader>             
                                <CustomConfig>
                                    <ext:ConfigItem 
                                        Name="encodeFilters" 
                                        Value="function (filters) { return filters[0].value; }" 
                                        Mode="Raw" />
                                </CustomConfig>
                            </ext:JsonPProxy>
                        </Proxy>
                        <Model>
                            <ext:Model runat="server" IDProperty="post_id">
                                <Fields>
                                    <ext:ModelField Name="title" Mapping="topic_title" />
                                    <ext:ModelField Name="forumtitle" Mapping="forum_title" />
                                    <ext:ModelField Name="forumid" Type="Int" />
                                    <ext:ModelField Name="username" Mapping="author" />
                                    <ext:ModelField Name="replycount" Mapping="reply_count" Type="Int" />
                                    <ext:ModelField Name="lastpost" Mapping="post_time" Type="Date" DateFormat="timestamp" /> 
                                    <ext:ModelField Name="lastposter" />
                                    <ext:ModelField Name="excerpt" />
                                    <ext:ModelField Name="topic_id" />
                                </Fields>
                            </ext:Model>
                        </Model>                    
                        <Listeners>
                            <TotalCountChange Handler="#{GridPanel1}.down('#status').update({ count: this.getTotalCount() });" />
                        </Listeners>
                    </ext:Store>
                </Store>           
                <ColumnModel runat="server">
    		        <Columns>
                        <ext:RowNumbererColumn runat="server" Width="50" />
                        <ext:Column 
                            runat="server" 
                            Text="Topic" 
                            DataIndex="title" 
                            Flex="1">
                            <Renderer Fn="renderTopic" />
                        </ext:Column>
                        <ext:Column 
                            runat="server" 
                            Text="Author" 
                            DataIndex="username" 
                            Hidden="true" 
                            Sortable="false" />
                        <ext:Column 
                            runat="server" 
                            Text="Replies" 
                            DataIndex="replycount" 
                            Width="70" 
                            Align="Center" 
                            Sortable="false" />
                        <ext:Column 
                            runat="server" 
                            Text="Last Post" 
                            DataIndex="lastpost" 
                            Width="130" 
                            Sortable="false">
                            <Renderer Format="Date" FormatArgs="'n/j/Y g:i A'" />
                        </ext:Column>
    		        </Columns>
                </ColumnModel>           
                <View>
                    <ext:GridView runat="server" TrackOver="false" EmptyText="<h1 style='margin:20px;'>No matching results</h1>" />                    
                </View> 
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" PruneRemoved="false" Mode="Multi" />
                </SelectionModel>                                        
                <DockedItems>
                    <ext:Toolbar runat="server" Dock="Top">
                        <Items>
                            <ext:TriggerField 
                                runat="server"
                                Width="400"
                                FieldLabel="Search"
                                LabelWidth="50">
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                                    <ext:FieldTrigger Icon="Search" />
                                </Triggers>
                                <Listeners>
                                    <TriggerClick Fn="searchFieldTriggerClick" />
                                    <SpecialKey Fn="onSpecialKey" />
                                </Listeners>
                            </ext:TriggerField>
                            
                            <ext:ToolbarFill />
    
                            <ext:Component 
                                runat="server"
                                ItemID="status"
                                StyleSpec="margin-right:5px;">
                                <Tpl>
                                    <Html>
                                        Matching threads: {count}
                                    </Html>
                                </Tpl>
                            </ext:Component>
                        </Items>
                    </ext:Toolbar>
                </DockedItems>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    Yes, I got it reproducible with the v2.2 release. It was fixed.

    If it is not an option to update, please try this fix.

    Fix
    <style>
        .x-theme-neptune .x-ie8 .x-form-trigger-wrap input.x-form-text {
            border-right-width: 1px !important;
        }
    </style>
  6. #6
    Here is a simplified sample for both the cases. I will investigate further.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Trigger border issue</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Theme="Neptune" />
    
            <ext:Window runat="server" Layout="FitLayout" Width="200">
                <Items>
                    <ext:FormPanel runat="server" BodyPadding="10">
                        <Items>
                            <ext:NumberField ID="NumberField1" runat="server" HideTrigger="true" />
    
                            <ext:TriggerField ID="TriggerField1" runat="server">
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" />
                                    <ext:FieldTrigger Icon="Search" />
                                </Triggers>
                                <Listeners>
                                    <TriggerClick Handler="trigger.hide();" />
                                </Listeners>
                            </ext:TriggerField>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Please note that both the issues are not reproducible with the SVN trunk.
  7. #7
    Please use this fix
    .x-form-trigger-wrap {
        border-collapse: separate;
    }
    and remove the previous one.
  8. #8
    Thanks Daniil,

    It works fine!!

    Quote Originally Posted by Daniil View Post
    Please use this fix
    .x-form-trigger-wrap {
        border-collapse: separate;
    }
    and remove the previous one.

Similar Threads

  1. [CLOSED] Browser issue
    By Tarun_Chand in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 25, 2013, 2:59 AM
  2. [CLOSED] Ext.Net 1.1 issue in Chrome Browser?
    By ryan.kim in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 08, 2011, 9:37 PM
  3. Theme issue in mvc.ext.net
    By vs.mukesh in forum 1.x Help
    Replies: 0
    Last Post: Jun 10, 2010, 1:41 PM
  4. [CLOSED] Browser progress bar issue
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 19, 2010, 10:09 AM
  5. [CLOSED] Browser compatibility issue with Layout
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 14, 2009, 9:24 AM

Posting Permissions