I have a need to use the ComboxBox as input for multiple GridView Columns, only the last ComboBox displays correctly, the rest are positioned below the row. I'm attaching a sample source code using Table instead of GridView, since it has the same problem and will display without needing to bind data. Adding a position relative div around the Combox placed it in the right position; but when attempting to do a select, placed the item list further down and to the right.
I am using IE7, VS2010, and AJAX Toolkit version 4.1.40412.0.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Experiment2.aspx.cs" Inherits="Materials_InfoTracking.Experiment2" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<table width="100%">
<tr>
<td>
<asp:Label ID="lblMaterialType" runat="server" Text="MaterialType" />:
</td>
<td>
<asp:ComboBox ID="cbMaterialType" runat="server" Width="100px" AutoPostBack="True"
AutoCompleteMode="Suggest">
<asp:ListItem Text="CMA" Value="CMA" />
<asp:ListItem Text="HMA" Value="HMA" />
</asp:ComboBox>
</td>
<td>
<asp:Label ID="lblRecallJobMix" runat="server" Text="New Mix" />:
</td>
<td align="left" valign="top">
<asp:ComboBox ID="ComboBox1" runat="server" Width="100px" AutoPostBack="True"
AutoCompleteMode="Suggest">
</asp:ComboBox>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Comments: Applying the below CSS to your ComboBox should fix the problem. .CustomComboBoxStyle .ajax__combobox_inputcontainer { background: transparent; width: 125px; padding: 0px 0px 0px 0px; font-size: 12px; font-family: Tahoma; color: #0066CC; line-height: 1; border: solid 1px #CCCCCC; height: 30px; -webkit-appearance: none; vertical-align:top; } .CustomComboBoxStyle .ajax__combobox_textboxcontainer input { background: #FFF; width: 125px; padding: 5px 0px 5px 2px; font-size: 12px; font-family: Tahoma; color: #0066CC; line-height: 1; border: solid 1px #CCCCCC; height: 15px; -webkit-appearance: none; position:static; } .CustomComboBoxStyle .ajax__combobox_itemlist li { background: #FFF; width: 150px; padding: 5px; font-size: 12px; font-family: Tahoma; color: #0066CC; line-height: 1; border: solid 0px #CCCCCC; height: 15px; -webkit-appearance: none; } .CustomComboBoxStyle .ajax__combobox_buttoncontainer button { background-color: #99CCFF; border: solid 1px #0066CC; color: #fff; }
I am using IE7, VS2010, and AJAX Toolkit version 4.1.40412.0.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Experiment2.aspx.cs" Inherits="Materials_InfoTracking.Experiment2" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<table width="100%">
<tr>
<td>
<asp:Label ID="lblMaterialType" runat="server" Text="MaterialType" />:
</td>
<td>
<asp:ComboBox ID="cbMaterialType" runat="server" Width="100px" AutoPostBack="True"
AutoCompleteMode="Suggest">
<asp:ListItem Text="CMA" Value="CMA" />
<asp:ListItem Text="HMA" Value="HMA" />
</asp:ComboBox>
</td>
<td>
<asp:Label ID="lblRecallJobMix" runat="server" Text="New Mix" />:
</td>
<td align="left" valign="top">
<asp:ComboBox ID="ComboBox1" runat="server" Width="100px" AutoPostBack="True"
AutoCompleteMode="Suggest">
</asp:ComboBox>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Comments: Applying the below CSS to your ComboBox should fix the problem. .CustomComboBoxStyle .ajax__combobox_inputcontainer { background: transparent; width: 125px; padding: 0px 0px 0px 0px; font-size: 12px; font-family: Tahoma; color: #0066CC; line-height: 1; border: solid 1px #CCCCCC; height: 30px; -webkit-appearance: none; vertical-align:top; } .CustomComboBoxStyle .ajax__combobox_textboxcontainer input { background: #FFF; width: 125px; padding: 5px 0px 5px 2px; font-size: 12px; font-family: Tahoma; color: #0066CC; line-height: 1; border: solid 1px #CCCCCC; height: 15px; -webkit-appearance: none; position:static; } .CustomComboBoxStyle .ajax__combobox_itemlist li { background: #FFF; width: 150px; padding: 5px; font-size: 12px; font-family: Tahoma; color: #0066CC; line-height: 1; border: solid 0px #CCCCCC; height: 15px; -webkit-appearance: none; } .CustomComboBoxStyle .ajax__combobox_buttoncontainer button { background-color: #99CCFF; border: solid 1px #0066CC; color: #fff; }