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

RadTextBox width issue

4 Answers 284 Views

General Discussions

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

4 Answers, 1 is accepted

answered on 21 Apr 2011, 04:36 PM

Hi, I found that this issue somehow connected to Browser Mode, if browser mode = Compatibility View, than controls not rendered as expected, but when it defined as IE8, 9... then it works. The problem that by default site opened in Compatibility Mode, do you have any idea why it can happen?

Here A code I use to display page:

<%@ Page Title="" Language="C#" MasterPageFile="~/TreePartMaster.Master" AutoEventWireup="true"
   CodeBehind="CreateNewTask.aspx.cs" Inherits="Intel.Diamond.Web.Views.Tasks.CreateNewTaskPage" %>

<asp:Content ID="Header" ContentPlaceHolderID="HeadContent" runat="server">
   <script language="javascript" type="text/javascript">
   function ValidateSelectedTests(source, args) {
   var listbox = $find('<%= lstTests.ClientID %>');
   if (listbox != null) {
   args.IsValid = (listbox.get_checkedItems().length > 0);
   }
   }
   </script>
</asp:Content>
<asp:Content ID="Body" ContentPlaceHolderID="MainContent" runat="server">
   <table class="dmTable">
   <tr>
   <td style="width: 40%;">
   <table style="width: 100%;">
   <thead>
   <tr>
   <th colspan="3" style="background-color: ActiveCaption; color: CaptionText;">
   Task Details
   </th>
   </tr>
   </thead>
   <tr>
   <td style="width: 30%;">
   Description:
   </td>
   <td style="width: 65%;">
   <telerik:RadTextBox ID="txtTaskDescription" runat="server" Width="100%" EmptyMessage="Enter Description"
   Wrap="False" />
   </td>
   <td style="width: 5%; text-align: left;" />
   </tr>
   <tr>
   <td>
   Name:
   </td>
   <td>
   <telerik:RadTextBox ID="txtTaskName" runat="server" Width="100%" ReadOnly="false"
   BackColor="InactiveCaptionText">
   </telerik:RadTextBox>
   </td>
   <td>
   </td>
   </tr>
   <tr>
   <td>
   Priority:
   </td>
   <td>
   <telerik:RadComboBox ID="cmbTaskPriority" runat="server" Width="100%" EmptyMessage="Select Priority...">
   </telerik:RadComboBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_cmbTaskPriority" runat="server" ErrorMessage="The Task Priority field is not selected."
   ControlToValidate="cmbTaskPriority" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   Status:
   </td>
   <td>
   <telerik:RadComboBox ID="cmbTaskStatus" runat="server" Width="100%" EmptyMessage="Select Status...">
   </telerik:RadComboBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_cmbTaskStatus" runat="server" ErrorMessage="The Task Status field is not selected."
   ControlToValidate="cmbTaskStatus" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   Type:
   </td>
   <td>
   <telerik:RadComboBox ID="cmbTaskType" runat="server" Width="100%" EmptyMessage="Select Type...">
   </telerik:RadComboBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_cmbTaskType" runat="server" ErrorMessage="The Task Type field is not selected."
   ControlToValidate="cmbTaskType" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   Owner:
   </td>
   <td>
   <telerik:RadComboBox ID="cmbTaskOwner" runat="server" Width="100%" EmptyMessage="Select User...">
   </telerik:RadComboBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_cmbTaskOwner" runat="server" ErrorMessage="The Task Owner field is not selected."
   ControlToValidate="cmbTaskOwner" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   Opened by:
   </td>
   <td>
   <telerik:RadComboBox ID="cmbOpenedBy" runat="server" Width="100%" EmptyMessage="Select User...">
   </telerik:RadComboBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_cmbOpenedBy" runat="server" ErrorMessage="The Opened By User field is not selected."
   ControlToValidate="cmbOpenedBy" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   Closed by:
   </td>
   <td>
   <telerik:RadComboBox ID="cmbClosedBy" runat="server" Width="100%" EmptyMessage="Select User...">
   </telerik:RadComboBox>
   </td>
   <td>
   </td>
   </tr>
   <tr>
   <td>
   Comment:
   </td>
   <td>
   <telerik:RadTextBox ID="txtTaskComent" runat="server" Width="100%" EmptyMessage="Enter Commnet"
   Wrap="False" />
   </td>
   <td style="width: 3%; text-align: left;" />
   </tr>
   <tr>
   <td>
   Desired Due Date:
   </td>
   <td>
   <telerik:RadDatePicker ID="rdpDesiredDueDate" runat="server" Width="100%" Calendar-TitleFormat="dd/MM/yyyy"
   DateInput-DateFormat="dd/MM/yyyy" DateInput-DisplayDateFormat="dd/MM/yyyy" DateInput-EmptyMessage="Select Due Date"
   Culture="en-US">
   <Calendar TitleFormat="dd/MM/yyyy" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
   ViewSelectorText="x">
   </Calendar>
   <DateInput DateFormat="dd/MM/yyyy" DisplayDateFormat="dd/MM/yyyy" EmptyMessage="Select Date dd/mm/yyyy">
   </DateInput>
   <DatePopupButton HoverImageUrl="" ImageUrl="" />
   </telerik:RadDatePicker>
   </td>
   <td />
   </tr>
   </table>
   </td>
   <td style="width: 60%;">
   <table style="width: 100%">
   <thead>
   <tr>
   <th colspan="3" style="background-color: ActiveCaption; color: CaptionText;">
   HW Details
   </th>
   </tr>
   </thead>
   <tr>
   <td style="width: 30%;">
   Project:
   </td>
   <td style="width: 65%;">
   <telerik:RadComboBox ID="cmbProjects" runat="server" EmptyMessage="Select Project..."
   OnItemDataBound="cmbProjects_ItemDataBound" Width="100%">
   </telerik:RadComboBox>
   </td>
   <td style="width: 5%; text-align: left;">
   <asp:RequiredFieldValidator ID="RFV_cmbProjects" runat="server" ErrorMessage="The Project field is not selected."
   ControlToValidate="cmbProjects" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   HW Cycle:
   </td>
   <td>
   <telerik:RadComboBox ID="cmbHWCycles" runat="server" EmptyMessage="Select Cycle..."
   Width="100%" OnItemDataBound="cmbHWCycles_ItemDataBound">
   </telerik:RadComboBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_cmbHWCycles" runat="server" ErrorMessage="The HW Cycles field is not selected."
   ControlToValidate="cmbHWCycles" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   HW Config:
   </td>
   <td>
   <telerik:RadTextBox ID="txtHWConfig" runat="server" Width="100%" EmptyMessage="Enter Config...">
   </telerik:RadTextBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_txtHWConfig" runat="server" ErrorMessage="The HW Config field is empty."
   ControlToValidate="txtHWConfig" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   HW Description:
   </td>
   <td colspan="2">
   <telerik:RadTextBox ID="txtHWDescription" runat="server" Width="100%" EmptyMessage="Enter Description">
   </telerik:RadTextBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_HWDescription" runat="server" ErrorMessage="Please, enter HW Description for current task."
   ControlToValidate="txtHWDescription" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   Boards SNs:
   </td>
   <td colspan="2">
   <telerik:RadTextBox ID="txtBoards" runat="server" ToolTip="Comma separated SNs. Each board SN max(10 letters)."
   Height="60px" Width="100%" EmptyMessage="Enter Boards [ board01, board02,...]"
   TextMode="MultiLine">
   </telerik:RadTextBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_BoardSns" runat="server" ErrorMessage="Please, enter related Boards SNs for current task."
   ControlToValidate="txtBoards" Font-Size="Medium" ForeColor="#FE2101" Display="Dynamic">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   </table>
   </td>
   </tr>
   <tr>
   <td>
   <table style="width: 100%;">
   <thead>
   <tr>
   <th colspan="3" style="background-color: ActiveCaption; color: CaptionText;">
   Test Flow
   </th>
   </tr>
   </thead>
   <tr>
   <td>
   Special Instructions:
   </td>
   <td>
   <telerik:RadTextBox ID="txtSpecialInstructions" runat="server" Width="98%" EmptyMessage="Enter Special Instruction">
   </telerik:RadTextBox>
   </td>
   </tr>
   <tr>
   <td style="width: 30%;">
   Standard Flow:
   </td>
   <td style="width: 65%;">
   <telerik:RadComboBox ID="cmbStandardFlow" runat="server" Width="100%" EmptyMessage="Select Tests or Choice Existed Flow..."
   OnDataBound="cmbStandardFlow_DataBound" AutoPostBack="True" CausesValidation="False"
   OnSelectedIndexChanged="cmbStandardFlow_SelectedIndexChanged">
   </telerik:RadComboBox>
   </td>
   <td style="width: 5%; text-align: left;" />
   </tr>
   <tr>
   <td>
   <asp:Button ID="btnCustomize" runat="server" Text="Customize" OnClick="btnCustomize_OnClick"
   CausesValidation="False" />
   </td>
   <td>
   <telerik:RadListBox ID="lstTests" runat="server" CheckBoxes="True" Width="99%" Height="150px"
   CausesValidation="False" AutoPostBack="True">
   </telerik:RadListBox>
   </td>
   <td style="text-align: left;">
   <asp:CustomValidator ID="CFV_lstTests" runat="server" ControlToValidate="lstTests"
   ErrorMessage="You Must Choose At Lease 1 test" ClientValidationFunction="ValidateSelectedTests"
   Font-Size="Medium" ForeColor="#FE2101" ValidateEmptyText="True">*</asp:CustomValidator>
   </td>
   </tr>
   </table>
   </td>
   <td>
   <table style="width: 100%">
   <thead>
   <tr>
   <th colspan="3" style="background-color: ActiveCaption; color: CaptionText;">
   SW Details
   </th>
   </tr>
   </thead>
   <tr>
   <td style="width: 30%;">
   Driver Version:
   </td>
   <td style="width: 65%;">
   <telerik:RadTextBox ID="txtDriverVersion" runat="server" Width="100%" EmptyMessage="Enter Driver Version">
   </telerik:RadTextBox>
   </td>
   <td style="width: 5%; text-align: left;">
   <asp:RequiredFieldValidator ID="RFV_DriverVersion" runat="server" ErrorMessage="Please, enter Driver Version for current task."
   ControlToValidate="txtDriverVersion" Font-Size="Medium" ForeColor="#FE2101">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   uCode Version:
   </td>
   <td>
   <telerik:RadTextBox ID="txtUCodeVersion" runat="server" Width="100%" EmptyMessage="Enter uCode Version"
   Text="NA">
   </telerik:RadTextBox>
   </td>
   </tr>
   <tr>
   <td>
   HiT Version:
   </td>
   <td>
   <telerik:RadTextBox ID="txtHitVersion" runat="server" Width="100%" EmptyMessage="Enter HIT Version"
   Text="Latest">
   </telerik:RadTextBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_HITVersion" runat="server" ErrorMessage="Please, enter HIT Version for current task."
   ControlToValidate="txtHitVersion" Font-Size="Medium" ForeColor="#FE2101">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   IM Version:
   </td>
   <td>
   <telerik:RadTextBox ID="txtIMVersion" runat="server" Width="100%" EmptyMessage="Enter IM version"
   Text="Latest">
   </telerik:RadTextBox>
   </td>
   </tr>
   </table>
   </td>
   </tr>
   <tr>
   <td>
   <table style="width: 100%">
   <thead>
   <tr>
   <th colspan="3" style="background-color: ActiveCaption; color: CaptionText;">
   Analysis Requirement
   </th>
   </tr>
   </thead>
   <tr>
   <td style="width: 30%;">
   Analysis Type:
   </td>
   <td style="width: 65%;">
   <telerik:RadTextBox ID="txtAnalysisType" runat="server" Width="100%" EmptyMessage="Enter Analysis Type...">
   </telerik:RadTextBox>
   </td>
   <td style="width: 5%; text-align: left;">
   <asp:RequiredFieldValidator ID="RFV_cmbAnalysisType" runat="server" ErrorMessage="The Analysis Type is empty."
   ControlToValidate="txtAnalysisType" Font-Size="Medium" ForeColor="#FE2101">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   </table>
   </td>
   <td>
   <table style="width: 100%">
   <thead>
   <tr>
   <th colspan="3" style="background-color: ActiveCaption; color: CaptionText;">
   Links
   </th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td style="width: 30%;">
   Flow Library:
   </td>
   <td style="width: 65%;">
   <telerik:RadTextBox ID="txtFlowLibrary" runat="server" EmptyMessage="Enter Flow Link"
   Width="100%" />
   </td>
   <td style="width: 5%; text-align: left;">
   <asp:RequiredFieldValidator ID="RFV_txtFlowLibrary" runat="server" ErrorMessage="Please, enter Flow Library Link for current task."
   ControlToValidate="txtFlowLibrary" Font-Size="Medium" ForeColor="#FE2101">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   Result Library:
   </td>
   <td>
   <telerik:RadTextBox ID="txtResultLibrary" runat="server" Width="100%" EmptyMessage="Enter Result Link" />
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_txtResultLibrary" runat="server" ErrorMessage="Please, enter Result Library Link for current task."
   ControlToValidate="txtResultLibrary" Font-Size="Medium" ForeColor="#FE2101">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   <tr>
   <td>
   SW Library:
   </td>
   <td>
   <telerik:RadTextBox ID="txtSWLibrary" runat="server" Width="100%" EmptyMessage="Enter SWLibrary">
   </telerik:RadTextBox>
   </td>
   <td>
   <asp:RequiredFieldValidator ID="RFV_txtSWLibrary" runat="server" ErrorMessage="Please, enter SW Library Link for current task."
   ControlToValidate="txtSWLibrary" Font-Size="Medium" ForeColor="#FE2101">*</asp:RequiredFieldValidator>
   </td>
   </tr>
   </tbody>
   </table>
   </td>
   </tr>
   <tr>
   <td colspan="1" style="text-align: left;">
   <asp:ValidationSummary ID="VS_NewTask" runat="server" Font-Size="Medium" ForeColor="#FE2101" />
   </td>
   <td colspan="1" style="text-align: right;" dir="rtl">
   <table style="width: auto">
   <tr>
   <td>
   <telerik:RadButton ID="btnCancelNewTask" runat="server" Text="Cancel" OnClick="btnCancelNewTask_Click" CausesValidation="False" />
   </td>
   <td>
   <telerik:RadButton ID="btnCreateNewTask" runat="server" Text="Create" OnClick="btnCreateNewTask_Click" />
   </td>
   </tr>
   </table>
   </td>
   </tr>
   <tr>
   <td colspan="2" style="text-align: left; vertical-align: text-top;">
   <asp:Label ID="lblMessage" runat="server" Font-Size="Medium" ForeColor="#FE2101"></asp:Label>
   </td>
   </tr>
   </table>
</asp:Content>

answered on 27 Apr 2011, 10:01 AM

RadInputWidth.zip

Hello George,

The presented behavior is by design in the RadInput control. The input re calculate its width in the different browser modes as in case the width is set to 100% the RadPicker controls join the input area and the popup icon. Therefore such recalculation is needed. In your application possible workaround is to set the width with css. Find attached a sample application which uses your code and represents the mentioned workaround.

All the best,
Maria Ilieva
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.