This is a migrated thread and some comments may be shown as answers.

RadStrip breaks with Microsoft CodedUI Test

4 Answers 53 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 28 Feb 2011, 05:39 PM

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!

4 Answers, 1 is accepted

Sort by
0
Accepted
Helen
Telerik team
answered on 01 Mar 2011, 11:18 AM
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!
0
Adam
Top achievements
Rank 1
answered on 01 Mar 2011, 05:28 PM
This solution fixed our problem with the RadTabStrip and this also works to fix the same problem with the RadComboBox.

Thanks!
0
Carlos
Top achievements
Rank 1
answered on 17 Mar 2011, 12:22 AM

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>
0
Helen
Telerik team
answered on 17 Mar 2011, 05:05 PM
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
Tags
TabStrip
Asked by
Adam
Top achievements
Rank 1
Answers by
Helen
Telerik team
Adam
Top achievements
Rank 1
Carlos
Top achievements
Rank 1
Share this question
or