Ajax control toolkit combobox showing weird bullets in dropdown

Question

I'm using Ajax control toolkit's combobox in my website. I'm binding custom type data to it dynamically. Here is the aspx code I put for it.

<ajaxToolkit:ComboBox ID="ddlAddAccount" runat="server" AutoPostBack="False" DropDownStyle="DropDownList" AutoCompleteMode="SuggestAppend" CaseSensitive="False" CssClass="ComboBoxStyle" ItemInsertLocation="Append"/>

Here is the CSS to that:

.ComboBoxStyle .ajax__combobox_itemlist 
{ 
            border: 1px solid YellowGreen;  
            font-size:medium;  
            font-family:Courier New;  
            padding-left: 0px;  
            list-style:none;
            list-style-type:none; 
}

The problem I'm facing is that when the DDL is rendered on the page, it is showing some weird boxes inside the dropdown. They seem to be bullets. But despite putting list-style-type : none; in the css, there is no change in the output. That is, the weird boxes still show up. Here is the screen clip of the rendered combo box:

I even checked the rendered HTML mark up to see if there is any character that is being appended but there isn't. The <li> tags in the <ul> tag simply has the list of elements that are binded.

Any Idea what this can be and how to get rid of these?? I tried ddlAddAccount.Items.Clear(); before binding but that didn't help.

Thanks a lot!

Answer 1

If it is indeed list bullet items you can try putting !important in the style to make sure that there is no list style applied.

.ComboBoxStyle .ajax__combobox_itemlist
{
    border: 1px solid YellowGreen;
    font-size: medium;
    font-family: Courier New;
    padding-left: 0px;
    list-style-type: none !important; /* Add the important here */
}

I can't reproduce your issue but you must have some sort of css style being applied to ul or li tags that is causing this. I know you mentioned you unchecked all the styling on the control in the browser but there must be something you missed.

Hopefully this works.

Answer 2

Most probably some additional styling is conflicting with your combo-box.

Use a browser developer tool (F12 developer tools in IE, Tools --> developer tools in chrome) and isolate the CSS applied on your list.

Also the combo-box will not be rendered as <option>. It should be rendered as an unordered list (<ul><li>...</li>)