Combobox Keeps getting wider in panelbar

[Ryan Spitler]

I have some combo boxes within 3 rad panelbars, each time I expand a panelbar, all the combo boxes grow in width! I have tried wrapping these in tables, divs, etc and they just keep growing!

Here is a simple page that recreates the issue:

<%

@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikTest1._Default" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml" >

 

<

 

head runat="server">

 

 

<title>Untitled Page</title>

 

</

 

head>

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">

 

 

</telerik:RadScriptManager>

 

 

<div>

 

 

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="1000">

 

 

<Items>

 

 

<telerik:RadPanelItem runat="server" Text="Customer Data" Expanded="True">

 

 

<Items>

 

 

<telerik:RadPanelItem Value="CustomerData" runat="server">

 

 

<ItemTemplate>

 

 

<table>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadTextBox ID="txtLastName" MaxLength="50" Width="350px" Label="Last Name" LabelCssClass="LabelCustomer" runat="server">

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

<td width="20px">&nbsp;</td>

 

 

<td>

 

 

<telerik:RadTextBox ID="txtFirstName" MaxLength="50" Width="350px" Label="First Name" LabelCssClass="LabelCustomer" runat="server">

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadTextBox ID="txtStreet" MaxLength="50" Width="350px" Label="Street Address" LabelCssClass="LabelCustomer" runat="server">

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

<td width="20px">&nbsp;</td>

 

 

<td>

 

 

<telerik:RadTextBox ID="txtCity" MaxLength="50" Width="350px" Label="City" LabelCssClass="LabelCustomer" runat="server">

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadComboBox ID="cmbState" Label="State" LabelCssClass="LabelCustomerDDL" runat="server" Height="200px" Width="250px"

 

 

DropDownWidth="298px" EmptyMessage="Choose a State or Province" HighlightTemplatedItems="true"

 

 

EnableLoadOnDemand="true" MarkFirstMatch="true">

 

 

<HeaderTemplate>

 

 

<table style="width: 275px" cellspacing="0" cellpadding="0">

 

 

<tr>

 

 

<td style="width: 177px;">

 

State / Province

</td>

 

 

<td style="width: 60px;">

 

State Code

</td>

 

 

<td style="width: 40px;">

 

Country

</td>

 

 

</tr>

 

 

</table>

 

 

</HeaderTemplate>

 

 

<ItemTemplate>

 

 

<table style="width: 275px" cellspacing="0" cellpadding="0">

 

 

<tr>

 

 

<td style="width: 177px;">

 

Texas

 

</td>

 

 

<td style="width: 60px;">

 

TX

 

</td>

 

 

<td style="width: 40px;">

 

USA

 

</td>

 

 

</tr>

 

 

</table>

 

 

</ItemTemplate>

 

 

</telerik:RadComboBox>

 

 

</td>

 

 

<td width="20px">&nbsp;</td>

 

 

<td>

 

 

<telerik:RadTextBox ID="txtPostalCode" MaxLength="50" Width="350px" Label="Postal Code" LabelCssClass="LabelCustomer" runat="server">

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</ItemTemplate>

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelItem>

 

 

<telerik:RadPanelItem runat="server" Text="Vehicle Data">

 

 

<Items>

 

 

<telerik:RadPanelItem Value="VehicleData" runat="server">

 

 

<ItemTemplate>

 

 

<table>

 

 

<tr>

 

 

<td colspan="3">

 

 

<telerik:RadTextBox ID="txtVin" MaxLength="50" Width="350px" Label="VIN Number" LabelCssClass="LabelCustomer" runat="server">

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadTextBox ID="txtLicense" MaxLength="4" Width="350px" Label="License Plate" LabelCssClass="LabelCustomer" runat="server">

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

<td width="20px">&nbsp;</td>

 

 

<td>

 

 

<telerik:RadTextBox ID="txtYear" MaxLength="50" Width="350px" Label="Year" LabelCssClass="LabelCustomer" runat="server">

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadComboBox ID="cmbVehicleMake" Label="Make" LabelCssClass="LabelCustomerDDL" runat="server" Height="200px" Width="200px"

 

 

DropDownWidth="200px" EmptyMessage="Choose a Vehicle Make" HighlightTemplatedItems="true"

 

 

EnableLoadOnDemand="true" MarkFirstMatch="true">

 

 

</telerik:RadComboBox>

 

 

</td>

 

 

<td width="20px">&nbsp;</td>

 

 

<td>

 

 

<telerik:RadComboBox ID="cmbVehicleModel" Label="Model" LabelCssClass="LabelCustomerDDL" runat="server" Height="200px" Width="200px"

 

 

DropDownWidth="200px" EmptyMessage="Choose a Vehicle Model" HighlightTemplatedItems="true"

 

 

EnableLoadOnDemand="true" MarkFirstMatch="true">

 

 

</telerik:RadComboBox>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</ItemTemplate>

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelBar>

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

 

 

</telerik:RadAjaxManager>

 

 

</div>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

[Yana]

Hello Ryan,

I've managed to observe this issue in IE7 only, we'll try our best to fix it as soon as possible. Please for now set fixed width to the comboboxes with the following css style:

<style type="text/css">
    .RadComboBox table { width: 250px !important; }
</style>

Thank you for reporting the problem, you can find your points updated.

Sincerely yours,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.