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

IE RadTextBox size issue

5 Answers 135 Views

General Discussions

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

Justin asked on 11 Dec 2012, 05:43 PM

IE-RadTextBox.png

Chrome-Rad-TextBox.png

I am having trouble with the text box's in IE 9. I have them inside of a control and they seem to grow larger then the form itself when it pops up. It however works perfectly fine in firefox and Chrome. Any help would be greatly appreciated.

<table id="tblVehicle" cellspacing="2" cellpadding="1" width="100%" rules="none" border="0">

<tr>

<td colspan="4">

<b><asp:Label ID="lblHeading" runat="server" /></b><br />

</td>

</tr>

<tr>

<td colspan="4">

<asp:CheckBox ID="cbActive" runat="server" Font-Size="X-Small" Checked='<%# If(Eval("active") Is DBNull.Value, 0, Eval("active")) %>' Text="Active: "/>

</td>

</tr>

<tr>

<td>Salutation:</td>

<td>

<telerik:RadComboBox ID="cboContactSalutation" runat="server" Font-Size="X-Small"

Width="40px" SelectedValue='<%# Bind("contact_salutation") %>'>

<Items>

<telerik:RadComboBoxItem Text="" value="" />

<telerik:RadComboBoxItem Text="Mr." value="Mr." />

<telerik:RadComboBoxItem Text="Ms." value="Ms." />

<telerik:RadComboBoxItem Text="Dr." value="Dr." />

</Items>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>First Name:</td>

<td>

<telerik:RadTextBox ID="tbContactFirstNm" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("contact_first_nm") %>'/>

<asp:RequiredFieldValidator ID="rfvFirstName" runat="server"

ControlToValidate="tbContactFirstNm" ErrorMessage="* required"/>

</td>

</tr>

<tr>

<td>Last Name:</td>

<td>

<telerik:RadTextBox ID="tbContactLastNm" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("contact_last_nm") %>'/>

<asp:RequiredFieldValidator ID="rfvLastName" runat="server"

ControlToValidate="tbContactLastNm" ErrorMessage="* required"/>

</td>

</tr>

<tr>

<td>Job Title:</td>

<td>

<telerik:RadTextBox ID="tbContactTitle" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("contact_title") %>'/>

</td>

</tr>

<tr>

<td>Department:</td>

<td>

<telerik:RadTextBox ID="tbContactDept" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("contact_dept") %>'/>

</td>

</tr>

<tr>

<td>Work Phone:</td>

<td>

<telerik:RadTextBox ID="tbPhoneWork" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("phone_work") %>'/>

</td>

</tr>

<tr>

<td>Mobile Phone:<td>

<telerik:RadTextBox ID="tbPhoneMobile" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("phone_mobile") %>'/>

</td>

</tr>

<tr>

<td>Fax:</td>

<td>

<telerik:RadTextBox ID="tbPhoneFax" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("phone_fax") %>'/>

</td>

</tr>

<tr>

<td>Email:</td>

<td>

<telerik:RadTextBox ID="tbAddressEmail" runat="server" Font-Size="X-Small" Width="150px" Text='<%# Bind("address_email") %>'/>

</td>

</tr>

<tr>

<td>Alternate E-mail:</td>

<td>

<telerik:RadTextBox ID="tbAddressEmail2" runat="server" Font-Size="X-Small" Width="150px" Text='<%# Bind("address_email2") %>'/>

</td>

</tr>

<tr>

<td colspan="2">

<asp:Panel runat="server" ID="pnlMailingInfo">

<h2>Mailing Info</h2>

<table style="width:100%;">

<tr>

<td>Street Address:</td>

<td>

<telerik:RadTextBox ID="tbAddressMailingStreet1" runat="server" Width="150px" Font-Size="X-Small" Text='<%# Bind("address_mailing_street1") %>'/>

<asp:RequiredFieldValidator ID="rfvMailingSt1" runat="server"

ControlToValidate="tbAddressMailingStreet1" ErrorMessage="* required"/>

</td>

</tr>

<tr>

<td></td>

<td>

<telerik:RadTextBox ID="tbAddressMailingStreet2" runat="server" Font-Size="X-Small" Width="150px" Text='<%# Bind("address_mailing_street2") %>'/>

</td>

</tr>

<tr>

<td>City:</td>

<td>

<telerik:RadTextBox ID="tbAddressMailingCity" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("address_mailing_city") %>'/>

<asp:RequiredFieldValidator ID="rfvMailingCity" runat="server"

ErrorMessage="* required" ControlToValidate="tbAddressMailingCity"/>

</td>

</tr>

<tr>

<td>

State:

<telerik:RadTextBox ID="tbAddressMailingState" runat="server" Font-Size="X-Small" Width="30px" Text='<%# Bind("address_mailing_state") %>'/>

</td>

<td>

Zip:

<telerik:RadTextBox ID="tbAddressMailingZip" runat="server" Font-Size="X-Small" Width="70px" Text='<%# Bind("address_mailing_zip") %>'/>

<asp:RequiredFieldValidator ID="rfvMailingState" runat="server" Display="Dynamic"

ErrorMessage="* must enter state" ControlToValidate="tbAddressMailingState" />

<asp:RegularExpressionValidator ID="revMailingZip" runat="server"

ControlToValidate="tbAddressMailingZip"

ValidationExpression="^(\d{5}-\d{4}|\d{5}|\d{9})$|^([a-zA-Z]\d[a-zA-Z] \d[a-zA-Z]\d)$"

Display="Dynamic"

EnableClientScript="false"

ErrorMessage="* invalid zip code" />

</td>

</tr>

<tr>

<td>Country:</td>

<td>

<telerik:RadTextBox ID="tbAddressMailingCountry" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("address_mailing_country") %>'/>

<asp:RequiredFieldValidator ID="rfvMailingCountry" runat="server"

ErrorMessage="* required" ControlToValidate="tbAddressMailingCountry"/>

</td>

</tr>

<tr>

<td colspan="2">

<asp:CheckBox ID="cbShippingIsSame" runat="server" Font-Size="X-Small" OnCheckedChanged="Checkbox_Changed" AutoPostBack="true" />

Check if shipping info is different from mailing info

</td>

</tr>

</table>

</asp:Panel>

<asp:Panel runat="server" ID="pnlShippingInfo" Visible="false">

<h2>Shipping Info</h2>

<table style="width:100%;">

<tr>

<td>Street Address:</td>

<td>

<telerik:RadTextBox ID="tbAddressShippingStreet1" runat="server" Font-Size="X-Small" Width="150px" Text='<%# Bind("address_shipping_street1") %>'/>

</td>

</tr>

<tr>

<td></td>

<td>

<telerik:RadTextBox ID="tbAddressShippingStreet2" runat="server" Font-Size="X-Small" Width="150px" Text='<%# Bind("address_shipping_street2") %>'/>

</td>

</tr>

<tr>

<td>City:</td>

<td>

<telerik:RadTextBox ID="tbAddressShippingCity" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("address_shipping_city") %>'/>

</td>

</tr>

<tr>

<td>

State:

<telerik:RadTextBox ID="tbAddressShippingState" runat="server" Font-Size="X-Small" Width="30px" Text='<%# Bind("address_shipping_state") %>'/>

</td>

<td>

Zip:

<telerik:RadTextBox ID="tbAddressShippingZip" runat="server" Font-Size="X-Small" Width="70px" Text='<%# Bind("address_shipping_zip") %>'/>

<asp:RegularExpressionValidator ID="revShippingZip" runat="server"

ControlToValidate="tbAddressShippingZip"

ValidationExpression="^(\d{5}-\d{4}|\d{5}|\d{9})$|^([a-zA-Z]\d[a-zA-Z] \d[a-zA-Z]\d)$"

Display="Dynamic"

EnableClientScript="false"

ErrorMessage="* invalid zip code" />

</td>

</tr>

<tr>

<td>Country:</td>

<td>

<telerik:RadTextBox ID="tbAddressShippingCountry" runat="server" Font-Size="X-Small" Width="120px" Text='<%# Bind("address_shipping_country") %>'/>

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

<tr>

<td align="right" colspan="4">

<asp:button id="btnUpdate" text="Update" runat="server" CommandName="Update" Visible='<%# Not (TypeOf DataItem Is Telerik.Web.UI.GridInsertionObject) %>'></asp:button>

<asp:button id="btnInsert" text="Insert" runat="server" CommandName="PerformInsert" Visible='<%# (TypeOf DataItem Is Telerik.Web.UI.GridInsertionObject) %>'></asp:button>

<asp:button id="btnCancel" text="Cancel" runat="server" causesvalidation="False" commandname="Cancel"></asp:button>

</td>

</tr>

</table>

5 Answers, 1 is accepted

answered on 17 Dec 2012, 09:35 AM

testPage.zip

Hello Justin,

I have tested your scenario, but the width of the RadTextBoxes is as expected. For reference, I am sending my test sample page.

I guess you are using custom styles, which breaks the layout. Therefore, could you review them and let me know how it goes?

Regards,
Galin
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 10 Jan 2013, 01:36 PM

Telerik-RadTextbox-width-issue.jpg

Hi Galin,

We also have same problem even after removing all custom styles. This issue started after we upgraded telerik version 2012.2.912.40. Previously, it was working fine even with custom styles. Also if page refresh, the text box size is getting displayed correctly. Attached the screenshot fro your reference.
Please let me know if you have work around to resolve this issue.
Thanks,
Hari