Home/ Questions/Q 8667051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T17:52:38+00:00

I have been using the same Ajax Combobox everywhere in my project but as

  • 0

I have been using the same Ajax Combobox everywhere in my project but as soon as I use Ajax Combobox under the jquery tab controls, the list shifts to the right and UI appears vague.
I don’t want to shift from ajax to jquery combobox and autocomplete, as I just want this issue to be resolved.
Below is my code:

<ajax:ComboBox ID="LenCompDpd" runat="server" Width="133px" CssClass="AquaStyle     textfont"
OnSelectedIndexChanged="LenCompDpd_SelectedIndexChanged" AutoPostBack="true"
                                    DropDownStyle="DropDown" AutoCompleteMode="SuggestAppend" CaseSensitive="false"
                                    ItemInsertLocation="OrdinalText" />
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is because the css settings for the jQuery UI messes with the css settings for the Ajax ComboBox, here is a simple example where I had to set the styles for the ComboBox in the page to adjust for the css from jQuery to make it look normal:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tabs.aspx.cs" Inherits="WebApplication1.Tabs" %>
<!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>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>    
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script type="text/javascript">        
        $(function () { $("#tabs").tabs(); });    
    </script>
    <style type="text/css">
        .ajax__combobox_itemlist
        {
            left: 28px !important;            
            top: 103px !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div id="tabs">    
            <ul>        
                <li><a href="#tabs-1">Nunc tincidunt</a></li>        
                <li><a href="#tabs-2">Proin dolor</a></li>
            </ul>    
            <div id="tabs-1">
                   <ajaxToolkit:ComboBox ID="ComboBox1" runat="server" 
                        AutoPostBack="False" 
                        DropDownStyle="DropDownList">
                        <asp:ListItem Text="One"></asp:ListItem>
                       <asp:ListItem Text="Two" />
                       <asp:ListItem Text="Three" />
                    </ajaxToolkit:ComboBox>
            </div>    
            <div id="tabs-2">        

            </div>    
        </div>
    </form>
</body>
</html>

    The trick is to use the css classes for the ComboBox, like .ajax__combobox_itemlist to adjust the style so it works with the jQuery stuff.

    • 0