RadStrip breaks with Microsoft CodedUI Test

5 posts, 1 answers
  1. Adam
    Adam avatar
    2 posts
    Member since:
    Feb 2009

    Posted 28 Feb 2011 Link to this post

    Some of my controls render incorrectly in IE8 and 9 when Action Recorder is running. For example, my Telerik RadStrip control renders vertically broken instead of horizontally.

    Here's a pic of the incorrect rendering:

    http://i1089.photobucket.com/albums/i341/adammil2000/incorrect.png

    Here's a pic of the correct rendering when I get rid of action recorder:

    http://i1089.photobucket.com/albums/i341/adammil2000/correct.png

    Please help, thanks!

  2. Answer
    Helen
    Admin
    Helen avatar
    1052 posts

    Posted 01 Mar 2011 Link to this post

    Hi Adam,

    Thank you for the report. We were able to reproduce the problem locally.
    It happens because the recorder includes some <script> tags before the rendered HTML and for that reason interacts with our styles.
    To avoid the problem you may include the following css to your RadTabStrip's page head tag:

    <style type="text/css">
           *+HTML div.RadTabStrip .rtsLI { float: left; }
    </style>

    Hope it helps.

    Regards,
    Helen
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. Adam
    Adam avatar
    2 posts
    Member since:
    Feb 2009

    Posted 01 Mar 2011 Link to this post

    This solution fixed our problem with the RadTabStrip and this also works to fix the same problem with the RadComboBox.

    Thanks!
  4. Carlos
    Carlos avatar
    1 posts
    Member since:
    Feb 2009

    Posted 16 Mar 2011 Link to this post

    Hello,
    I probably need to open another question rather than ask it in Reply but since its the only related topic I can find here goes.

    We had the smae RadTab rendering problem while running MIcrosoft Test Manager and your fix worked fine.
    The Tab Strip was in our Master Page
    However, we also have the same problem with all our RadComboBox controls in another specific page inside our MainContent PlaceHolder:

    Please help !  Thank You
    See below:

    <%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/FMS_Master.Master"
        CodeBehind="PilotSetup.aspx.vb" Inherits="FMS.PilotSetup" Title="Pilot Setup"
        ValidateRequest="false" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="phone" Src="~/UserControls/Phones.ascx" TagName="PilotPhones" %>
    <%@ Register TagPrefix="email" Src="~/UserControls/Emails.ascx" TagName="PilotEmails" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <link href="../CustomSkins/Grid.Custom.css" rel="stylesheet" type="text/css" />
        <link href="../CustomSkins/ComboBox.Custom.css" rel="stylesheet" type="text/css" />
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
        <div id="ThirdLevel">
            <div class="dvHeader">
                Pilot Setup</div>
            <div id="MainContent">
                <table class="mainTable" width="100%">
                    <tr>
                        <td>
                            <asp:Image ImageUrl="~/images/error.gif" ID="imgError" runat="server" ImageAlign="AbsMiddle"
                                Visible="false" /><asp:Label ID="lblError" runat="server" Visible="false" CssClass="lblError"></asp:Label><br>
                            <asp:Image ImageUrl="~/images/info.gif" ID="imgInfo" runat="server" ImageAlign="AbsMiddle"
                                Visible="false" /><asp:Label ID="lblMessage" runat="server" Visible="false" CssClass="lblMessage"></asp:Label>
                            <asp:Image ImageUrl="~/images/warning.gif" ID="imgWarning" runat="server" ImageAlign="AbsMiddle"
                                Visible="false" /><asp:Label ID="lblWarnings" runat="server" Visible="false" CssClass="lblMessage"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadComboBox ID="cmbPilots" CssClass="DropDownNormal" runat="server" EnableEmbeddedSkins="False"
                                Skin="Custom" AutoPostBack="true" MarkFirstMatch="true" MaxHeight="200px">
                                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                            </telerik:RadComboBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                               
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table width="70%">
                                <tr>
                                    <td class="propertyHeaders">
                                        Linked User:
                                    </td>
                                    <td class="propertyText">
                                        <telerik:RadComboBox ID="cmbUserId" CssClass="DropDownNormal" runat="server" EnableEmbeddedSkins="False"
                                            Skin="Custom" AutoPostBack="true" MarkFirstMatch="true" MaxHeight="200px" TabIndex="1">
                                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                        </telerik:RadComboBox>
                                    </td>
                                    <td>
                                    </td>
                                    <td align="left">
                                        <asp:CheckBox ID="chkIsCurrent" runat="server" Enabled="false" Text="Is Pilot Current?" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                         First Name:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtFirstName" CssClass="TextBoxNormal" runat="server" MaxLength="25"
                                            TabIndex="2"></asp:TextBox>
                                    </td>
                                    <td class="propertyHeaders">
                                        Status:
                                    </td>
                                    <td class="propertyText">
                                        <telerik:RadComboBox ID="cmbStatus" CssClass="DropDownNormal" runat="server" EnableEmbeddedSkins="False"
                                            Skin="Custom" AutoPostBack="true" MarkFirstMatch="true" MaxHeight="200px" TabIndex="6">
                                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                         Last Name:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtLastName" CssClass="TextBoxNormal" runat="server" MaxLength="25"
                                            TabIndex="3"></asp:TextBox>
                                    </td>
                                    <td class="propertyHeaders">
                                        License Number:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtLicenseNumber" runat="server" CssClass="TextBoxNormal" MaxLength="50"
                                            TabIndex="7"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                         Spouse First Name:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtSpFirstName" CssClass="TextBoxNormal" runat="server" MaxLength="25"
                                            TabIndex="4"></asp:TextBox>
                                    </td>
                                    <td class="propertyHeaders">
                                        Medical Expiration:
                                    </td>
                                    <td class="propertyText">
                                        <telerik:RadDatePicker ID="txtMedicalExpiration" Width="160px" runat="server" TabIndex="8"
                                            Culture="(Default)">
                                            <DateInput TabIndex="8">
                                            </DateInput>
                                            <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x">
                                            </Calendar>
                                            <DatePopupButton TabIndex="8"></DatePopupButton>
                                        </telerik:RadDatePicker>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                        Spouse Last Name: 
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtSpLastName" CssClass="TextBoxNormal" runat="server" MaxLength="25"
                                            TabIndex="5"></asp:TextBox>
                                    </td>
                                    <td class="propertyHeaders">
                                        Certificates Expiration:
                                    </td>
                                    <td class="propertyText">
                                        <telerik:RadDatePicker ID="txtCertificatesExpiration" Width="160px" runat="server"
                                            TabIndex="9" Culture="(Default)">
                                            <DateInput TabIndex="9">
                                            </DateInput>
                                            <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x">
                                            </Calendar>
                                            <DatePopupButton TabIndex="9"></DatePopupButton>
                                        </telerik:RadDatePicker>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <center>
                                            <b>Primary Residence Information</b></center>
                                    </td>
                                    <td>
                                           
                                    </td>
                                    <td>
                                           
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                        Address 1:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtAddr1" CssClass="TextBoxNormal" runat="server" MaxLength="100"
                                            TabIndex="10"></asp:TextBox>
                                    </td>
                                    <td class="propertyHeaders">
                                        State:
                                    </td>
                                    <td class="propertyText">
                                        <telerik:RadComboBox ID="cmbState" CssClass="DropDownLong" runat="server" EnableEmbeddedSkins="False"
                                            Skin="Custom" Width="200px" MarkFirstMatch="true" MaxHeight="200px" TabIndex="13">
                                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                        Address 2:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtAddr2" CssClass="TextBoxNormal" runat="server" MaxLength="25"
                                            TabIndex="11"></asp:TextBox>
                                    </td>
                                    <td class="propertyHeaders">
                                        Zip Code:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtZipCode" CssClass="TextBoxNormal" runat="server" MaxLength="10"
                                            TabIndex="14"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                        City
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtCity" CssClass="TextBoxNormal" runat="server" MaxLength="50"
                                            TabIndex="12"></asp:TextBox>
                                    </td>
                                    <td class="propertyHeaders">
                                        Country:
                                    </td>
                                    <td class="propertyText">
                                        <telerik:RadComboBox ID="cmbCountry" CssClass="DropDownLong" runat="server" EnableEmbeddedSkins="False"
                                            Skin="Custom" Width="200px" MarkFirstMatch="true" MaxHeight="200px" TabIndex="15">
                                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <center>
                                            <b>International Information</b></center>
                                    </td>
                                    <td class="propertyHeaders">
                                    </td>
                                    <td class="propertyText">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                        Full Legal Name:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtLegalName" CssClass="TextBoxNormal" runat="server" MaxLength="25"
                                            TabIndex="16"></asp:TextBox>
                                    </td>
                                    <td class="propertyHeaders">
                                        Passport Number:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtPassportNumber" CssClass="TextBoxNormal" runat="server" MaxLength="25"
                                            TabIndex="19"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                        Date of Birth:
                                    </td>
                                    <td class="propertyText">
                                        <telerik:RadDatePicker ID="txtBirthDate" Width="160px" runat="server" TabIndex="17"
                                            Culture="(Default)" MinDate="1899-12-31">
                                            <DateInput TabIndex="17">
                                            </DateInput>
                                            <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x">
                                            </Calendar>
                                            <DatePopupButton TabIndex="17"></DatePopupButton>
                                        </telerik:RadDatePicker>
                                    </td>
                                    <td class="propertyHeaders">
                                        Passport Expiration:
                                    </td>
                                    <td class="propertyText">
                                        <telerik:RadDatePicker ID="txtPassportExpiration" Width="160px" runat="server" TabIndex="20"
                                            Culture="(Default)">
                                            <DateInput TabIndex="20">
                                            </DateInput>
                                            <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x">
                                            </Calendar>
                                            <DatePopupButton TabIndex="20"></DatePopupButton>
                                        </telerik:RadDatePicker>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                        Nationality:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtNationality" CssClass="TextBoxNormal" runat="server" MaxLength="25"
                                            TabIndex="18"></asp:TextBox>
                                    </td>
                                    <td class="propertyHeaders">
                                        Passport Country:
                                    </td>
                                    <td class="propertyText">
                                        <telerik:RadComboBox ID="cmbPassportCountry" CssClass="DropDownLong" runat="server"
                                            EnableEmbeddedSkins="False" Skin="Custom" Width="200px" MarkFirstMatch="true"
                                            MaxHeight="200px" TabIndex="21">
                                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="propertyHeaders">
                                    </td>
                                    <td class="propertyText">
                                    </td>
                                    <td class="propertyHeaders">
                                        Passport Issued By:
                                    </td>
                                    <td class="propertyText">
                                        <asp:TextBox ID="txtPassportIssuedBy" CssClass="TextBoxNormal" runat="server" MaxLength="100"
                                            TabIndex="22"></asp:TextBox>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <table width="100%">
                                <tr>
                                    <td align="center" valign="top">
                                        <phone:PilotPhones ID="crlPhones" runat="server" />
                                    </td>
                                    <td align="center" valign="top">
                                        <email:PilotEmails ID="crlEmails" runat="server" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br />
                            <asp:Button ID="btnSave" CssClass="ButtonNormal" runat="server" Text="Save" TabIndex="23" />
                            <br />
                            <br />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </asp:Content>
  5. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 17 Mar 2011 Link to this post

    Hi Adam,

    Please include the following css to your master page's head tag(to fix both the tabstrip and combobox problems):

    <style type="text/css">
          *+HTML div.RadTabStrip .rtsLI { float: left; }
          *+HTML div.RadComboBox  { display:block; }
    </style>

    Hope it helps.

    Regards,
    Helen
    the Telerik team
Back to Top