Skin not showing correctly - IE 9

6 posts, 0 answers
  1. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 27 Jan 2015 Link to this post

    I'm seeing some weird display behavior using a ListView with a data pager on IE 9.  I've already told the clients they need to upgrade their browsers but not all of them will :)

    Anyway, I've attached a PNG of what I see (unfortunately not ALL the time).  The IE 9 F12 dev tools are horrible so I can't tell from those if a style sheet isn't loading correctly or what.

    This is a scenario where I have a RadWindow which contains a RadTabStrip.  The tabs' content in the strip are dynamically loaded via ASCX controls.

    I'm curious if others have seen this behavior with IE 9, and if they were able to eliminate it.  

    ASPX:
    <telerik:radlistview id="lstViewEmployment" runat="server" datakeynames="Id" datasourceid="dsEmployments" allowpaging="True" allowcustompaging="True"
        allownaturalsort="True" pagesize="1" skin="Windows7" onitemcreated="lstViewEmployment_ItemCreated" oniteminserted="lstViewEmployment_ItemInserted"
        onitemupdated="lstViewEmployment_ItemUpdated" onitemcanceling="lstViewEmployment_ItemCanceling" onitemediting="lstViewEmployment_ItemEditing"
        onitemdatabound="lstViewEmployment_ItemDataBound">
        <LayoutTemplate>
            <div class="RadListView RadListViewFloated RadListView_Windows7">
                <div class="rlvFloated">
                    <div runat="server" id="itemPlaceholder"></div>
                </div>
                <telerik:RadDataPager runat="server" SEOPagingQueryPageKey="" Skin="Windows7" ID="RadDataPager1" PageSize="1" Width="900">
                    <Fields>
                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                        <telerik:RadDataPagerButtonField FieldType="NextLast" />
                        <telerik:RadDataPagerGoToPageField CurrentPageText="Employment Record" EnableSubmitButton="false" HorizontalPosition="RightFloat" />
                    </Fields>
                </telerik:RadDataPager>
                <div style="display: none">
                    <telerik:RadCalendar runat="server" ID="rlvSharedCalendar" Skin='<%#Container.Skin %>' RangeMinDate='<%#new DateTime(1900, 1, 1) %>' />
                </div>
                <div style="display: none">
                    <telerik:RadTimeView runat="server" ID="rlvSharedTimeView" Skin='<%# Container.Skin %>' />
                </div>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <div class="rlvI">
                <telerik:RadButton ID="btnEdit" runat="server" Text="Edit" ToolTip="Edit" CommandName="Edit" CausesValidation="false"></telerik:RadButton>
                <telerik:RadButton ID="btnDelete" runat="server" Text="Delete" ToolTip="Delete" CommandName="Delete" CausesValidation="false"></telerik:RadButton>
                <div class="formLine">
                    <div class="formField66">
                        Name of Employer:
                        <asp:Label ID="lblEmployerName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField66">
                        Employment Address:
                        <asp:Label ID="lblEmployerAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField33">
                        City, State:
                        <asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>'></asp:Label>,
                        <asp:Label ID="lblState" runat="server" Text='<%# Eval("State") %>'></asp:Label>
                    </div>
                    <div class="formField33">
                        County:
                        <asp:Label ID="lblCounty" runat="server" Text='<%# Eval("County") %>'></asp:Label>
                    </div>
                    <div class="formField33">
                        Zip:
                        <asp:Label ID="lblZip" runat="server" Text='<%# Eval("ZipCode") %>'></asp:Label>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField33">
                        Phone Number:
                        <asp:Label ID="lblPhone" runat="server" Text='<%# SorBll.Util.FormatPhoneNumber(Eval("Phone")) %>'></asp:Label>
                    </div>
                    <div class="formField66">
                        Employment Begin Date:
                        <asp:Label ID="lblStartDate" runat="server" Text='<%# SorBll.Util.FormatNullableDate(Eval("BeginDate")) %>'></asp:Label>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField66">
                        Occupation:
                        <asp:Label ID="lblOccupation" runat="server" Text='<%# Eval("Occupation") %>'></asp:Label>
                    </div>
                </div>
            </div>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <div class="rlvA">
                <telerik:RadButton ID="btnEdit" runat="server" Text="Edit" ToolTip="Edit" CommandName="Edit" CausesValidation="false"></telerik:RadButton>
                <telerik:RadButton ID="btnDelete" runat="server" Text="Delete" ToolTip="Delete" CommandName="Delete" CausesValidation="false"></telerik:RadButton>
                <div class="formLine">
                    <div class="formField66">
                        Name of Employer:
                        <asp:Label ID="lblEmployerName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField66">
                        Employment Address:
                        <asp:Label ID="lblEmployerAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField33">
                        City, State:
                        <asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>'></asp:Label>,
                        <asp:Label ID="lblState" runat="server" Text='<%# Eval("State") %>'></asp:Label>
                    </div>
                    <div class="formField33">
                        County:
                        <asp:Label ID="lblCounty" runat="server" Text='<%# Eval("County") %>'></asp:Label>
                    </div>
                    <div class="formField33">
                        Zip:
                        <asp:Label ID="lblZip" runat="server" Text='<%# Eval("ZipCode") %>'></asp:Label>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField33">
                        Phone Number:
                        <asp:Label ID="lblPhone" runat="server" Text='<%# SorBll.Util.FormatPhoneNumber(Eval("Phone")) %>'></asp:Label>
                    </div>
                    <div class="formField66">
                        Employment Begin Date:
                        <asp:Label ID="lblStartDate" runat="server" Text='<%# SorBll.Util.FormatNullableDate(Eval("BeginDate")) %>'></asp:Label>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField66">
                        Occupation:
                        <asp:Label ID="lblOccupation" runat="server" Text='<%# Eval("Occupation") %>'></asp:Label>
                    </div>
                </div>
            </div>
        </AlternatingItemTemplate>
        <EditItemTemplate>
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                <script type="text/javascript">
                    function CloseCityPopUpAndRefreshEmploymentEdit() {
                        var combo = $find("<%= lstViewEmployment.EditItems[0].FindControl("cboEmploymentCity").ClientID %>");
                        combo.requestItems("", false);
                    }
     
                    function onEmpCityClientFocus(sender, args) {
                        var box = $find("<%= lstViewEmployment.EditItems[0].FindControl("cboEmploymentCity").ClientID %>");
                        box.showDropDown();
                    }
                </script>
            </telerik:RadScriptBlock>
            <div class="rlvIEdit">
                <div class="formLine">
                    <div class="formField66">
                        Name of Employer:
                        <telerik:RadTextBox ID="txtEmployerName" runat="server" MaxLength="50" Width="400" Text='<%# Bind("Name") %>' TabIndex="1">
                            <ClientEvents OnBlur="ForceUpperCase" />
                        </telerik:RadTextBox>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField66">
                        Employment Address:
                        <telerik:RadTextBox ID="txtEmployerAddress" runat="server" MaxLength="50" Width="400" Text='<%# Bind("Address") %>' TabIndex="2">
                            <ClientEvents OnBlur="ForceUpperCase" />
                        </telerik:RadTextBox>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField33">
                        City, State:
                        <asp:LinkButton ID="lnkAddEmploymentCityEdit" runat="server" OnClick="lnkAddEmploymentCityEdit_Click">ADD CITY</asp:LinkButton>
                        |
                        <asp:LinkButton ID="lnkClearCity" runat="server" OnClick="lnkClearCity_Click">CLEAR CITY</asp:LinkButton>
                        <br />
                        <telerik:RadComboBox ID="cboEmploymentCity" runat="server" EmptyMessage="Type city ..." DataValueField="IDNumber" TabIndex="3" OnItemsRequested="cboEmploymentCity_ItemsRequested"
                                                OnClientFocus="onEmpCityClientFocus" DataTextField="CITY" MarkFirstMatch="true" DropDownAutoWidth="Enabled" DataSourceID="dsCities" EnableLoadOnDemand="False">
                            <ItemTemplate>
                                <%# Eval("CITY") %>, <%# Eval("State") %>, <%# Eval("ZIPCODE1") %> <%# Eval("COUNTY") %>
                            </ItemTemplate>
                        </telerik:RadComboBox>
                        ,
                        <telerik:RadTextBox ID="txtEmploymentState" runat="server" MaxLength="2" Width="45px" Enabled="false" Text='<%# Bind("State") %>'></telerik:RadTextBox>
                    </div>
                    <div class="formField33">
                        County:<br />
                        <telerik:RadTextBox ID="txtEmploymentCounty" runat="server" MaxLength="50" Enabled="false" Text='<%# Bind("County") %>'></telerik:RadTextBox>
                    </div>
                    <div class="formField33">
                        Zip:<br />
                        <telerik:RadMaskedTextBox ID="txtEmploymentZip" runat="server" Mask="#####" Enabled="false" Text='<%# Bind("ZipCode") %>'></telerik:RadMaskedTextBox>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField33">
                        Phone Number:<br />
                        <telerik:RadMaskedTextBox ID="txtEmploymentPhoneNumber" runat="server" Mask="(###) ###-####" Columns="15" Text='<%# Bind("Phone") %>' TabIndex="4"></telerik:RadMaskedTextBox>
                    </div>
                    <div class="formField66">
                        Employment Begin Date:
                        <telerik:RadDatePicker ID="txtEmploymentStartDate" runat="server" MinDate="1/1/1900" SelectedDate='<%# Bind("BeginDate") %>' TabIndex="5"></telerik:RadDatePicker>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField66">
                        Occupation:
                        <telerik:RadTextBox ID="txtEmploymentOccupation" runat="server" MaxLength="255" Width="400" Text='<%# Bind("Occupation") %>' TabIndex="6">
                            <ClientEvents OnBlur="ForceUpperCase" />
                        </telerik:RadTextBox>
                    </div>
                </div>
                <telerik:RadButton ID="btnUpdate" runat="server" Text="Update" ToolTip="Update" CommandName="Update"></telerik:RadButton>
                <telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" ToolTip="Cancel" CommandName="Cancel" CausesValidation="false"></telerik:RadButton>
            </div>
        </EditItemTemplate>
        <InsertItemTemplate>
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                <script type="text/javascript">
                    function CloseCityPopUpAndRefreshEmploymentInsert() {
                        var combo = $find("<%= lstViewEmployment.InsertItem.FindControl("cboEmploymentCity").ClientID %>");
                        combo.requestItems("", false);
                    }
     
                    function onEmpCityClientFocus(sender, args) {
                        var box = $find("<%= lstViewEmployment.InsertItem.FindControl("cboEmploymentCity").ClientID %>");
                        box.showDropDown();
                    }
                </script>
            </telerik:RadScriptBlock>
            <div class="rlvIEdit">
                <div class="formLine">
                    <div class="formField66">
                        Name of Employer:
                        <telerik:RadTextBox ID="txtEmployerName" runat="server" MaxLength="50" Width="400" Text='<%# Bind("Name") %>' TabIndex="1">
                            <ClientEvents OnBlur="ForceUpperCase" />
                        </telerik:RadTextBox>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField66">
                        Employment Address:
                        <telerik:RadTextBox ID="txtEmployerAddress" runat="server" MaxLength="50" Width="400" Text='<%# Bind("Address") %>' TabIndex="2">
                            <ClientEvents OnBlur="ForceUpperCase" />
                        </telerik:RadTextBox>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField33">
                        City, State:
                        <asp:LinkButton ID="lnkAddEmploymentCityInsert" runat="server" OnClick="lnkAddEmploymentCityInsert_Click">ADD CITY</asp:LinkButton>
                        |
                        <asp:LinkButton ID="lnkClearCity" runat="server" OnClick="lnkClearCity_Click">CLEAR CITY</asp:LinkButton>
                        <br />
                        <telerik:RadComboBox ID="cboEmploymentCity" runat="server" EmptyMessage="Type city ..." DataSourceID="dsCities" DataValueField="IDNumber"
                            DataTextField="CITY" MarkFirstMatch="true" DropDownAutoWidth="Enabled" TabIndex="3" OnItemsRequested="cboEmploymentCity_ItemsRequested" OnClientFocus="onEmpCityClientFocus">
                            <ItemTemplate>
                                <%# Eval("CITY") %>, <%# Eval("State") %>, <%# Eval("ZIPCODE1") %> <%# Eval("COUNTY") %>
                            </ItemTemplate>
                        </telerik:RadComboBox>
                        ,
                        <telerik:RadTextBox ID="txtEmploymentState" runat="server" MaxLength="2" Width="45px" Enabled="false" Text='<%# Bind("State") %>'></telerik:RadTextBox>
                    </div>
                    <div class="formField33">
                        County:<br />
                        <telerik:RadTextBox ID="txtEmploymentCounty" runat="server" MaxLength="50" Enabled="false" Text='<%# Bind("County") %>'></telerik:RadTextBox>
                    </div>
                    <div class="formField33">
                        Zip:<br />
                        <telerik:RadMaskedTextBox ID="txtEmploymentZip" runat="server" Mask="#####" Enabled="false" Text='<%# Bind("ZipCode") %>'></telerik:RadMaskedTextBox>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField33">
                        Phone Number:<br />
                        <telerik:RadMaskedTextBox ID="txtEmploymentPhoneNumber" runat="server" Mask="(###) ###-####" Columns="15" Text='<%# Bind("Phone") %>' TabIndex="4"></telerik:RadMaskedTextBox>
                    </div>
                    <div class="formField66">
                        Employment Begin Date:
                        <telerik:RadDatePicker ID="txtEmploymentStartDate" runat="server" MinDate="1/1/1900" SelectedDate='<%# Bind("BeginDate") %>' TabIndex="5"></telerik:RadDatePicker>
                    </div>
                </div>
                <div class="formLine">
                    <div class="formField66">
                        Occupation:
                        <telerik:RadTextBox ID="txtEmploymentOccupation" runat="server" MaxLength="255" Width="400" Text='<%# Bind("Occupation") %>' TabIndex="6">
                            <ClientEvents OnBlur="ForceUpperCase" />
                        </telerik:RadTextBox>
                    </div>
                </div>
                <telerik:RadButton ID="btnInsert" runat="server" Text="Add Employment Record" ToolTip="Add" CommandName="PerformInsert"></telerik:RadButton>
                <telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" ToolTip="Cancel" CommandName="Cancel" CausesValidation="false"></telerik:RadButton>
            </div>
        </InsertItemTemplate>
        <EmptyDataTemplate>
            <div class="RadListView RadListView_Windows7">
                <div class="rlvEmpty">There are no items to be displayed.</div>
            </div>
        </EmptyDataTemplate>       
    </telerik:radlistview>

    Datasource:
    <asp:LinqDataSource runat="server" EntityTypeName="" ID="dsEmployments" ContextTypeName="SorDal.Sor2PendingDbDataContext"
        EnableDelete="True" EnableInsert="True" EnableUpdate="True" OrderBy="Id" TableName="PendingOffenderEmployers" Where="OffenderId == @OffenderId"
        OnInserting="dsEmployments_Inserting" OnUpdating="dsEmployments_Updating">
        <WhereParameters>
            <asp:SessionParameter SessionField="CurrentPendingOffenderId" Name="OffenderId" Type="Int32"></asp:SessionParameter>
        </WhereParameters>
        <InsertParameters>
            <asp:SessionParameter SessionField="CurrentPendingOffenderId" Name="OffenderId" Type="Int32"></asp:SessionParameter>
        </InsertParameters>
    </asp:LinqDataSource>


    C#:
    protected void lstViewEmployment_ItemCreated(object sender, RadListViewItemEventArgs e)
    {
        RadComboBox cbo = e.Item.FindControl("cboEmploymentCity") as RadComboBox;
        if (cbo != null)
        {
            cbo.AutoPostBack = true;
            cbo.SelectedIndexChanged += cboEmploymentCity_SelectedIndexChanged;
        }
    }
    protected void lstViewEmployment_ItemInserted(object sender, RadListViewInsertedEventArgs e)
    {
        btnAddEmploymentRecord.Enabled = true;
    }
     
    protected void lstViewEmployment_ItemUpdated(object sender, RadListViewUpdatedEventArgs e)
    {
        btnAddEmploymentRecord.Enabled = true;
    }
     
    protected void lstViewEmployment_ItemCanceling(object sender, RadListViewCommandEventArgs e)
    {
        btnAddEmploymentRecord.Enabled = true;
    }
     
    protected void lstViewEmployment_ItemEditing(object sender, RadListViewCommandEventArgs e)
    {
        btnAddEmploymentRecord.Enabled = false;
    }
     
    protected void lstViewEmployment_ItemDataBound(object sender, RadListViewItemEventArgs e)
    {
        if (e.Item is RadListViewEditableItem)
        {
            RadListViewEditableItem item = e.Item as RadListViewEditableItem;
            RadComboBox cboEmploymentCity = item.FindControl("cboEmploymentCity") as RadComboBox;
            PendingOffenderEmployer emp = item.DataItem as PendingOffenderEmployer;
            cboEmploymentCity.Text = emp.City;
        }
    }
     
    protected void lstViewEmployment_PageIndexChanged(object sender, RadListViewPageChangedEventArgs e)
    {
        DisableUtilityWindows();
    }

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 30 Jan 2015 Link to this post

    Hello Kevin,

    I have to say that we have no such reports to IE 9 in particular. Can you please confirm that the problem is not replicated in other browsers as well?

    Currently, the only thing that I could suggest is that you see if you are loading the resources from CDN. The CDN is enabled by default and if you are not disabling it in your web.config file, please try adding the following and see if the issue will remain:
    <appSettings>
        <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
        <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />

    I am looking forward to your reply with the result.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 05 Feb 2015 in reply to Konstantin Dikov Link to this post

    Unfortunately adding the appSettings did not fix the problem.  It just seems like some styles are not loading correctly.  The same thing happened on some RadDropDown controls now too.  
  5. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 05 Feb 2015 in reply to Kevin F Link to this post

    See below.  RadDatePicker.  Also, where it says "click here to select race" should be a RadDropDown.
  6. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 05 Feb 2015 in reply to Kevin F Link to this post

    Sorry the screenshot image did not show.  I've attached it to this message.
  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 10 Feb 2015 Link to this post

    Hi Kevin,

    Since we are not aware of such issue related to IE 9 only, it will be impossible for us to determine what could cause this on your end.

    Can you please inspect your browser's console and see if the resources are loaded correctly in IE 9. You can also test the page in IE 9 on different machine and see if the same issue is observed.

    Additionally, you can open a regular support ticket and attach a sample, runnable project that replicates the issue, so we can test it locally.


    Best Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017