Question

I am using AjaxControlToolkit’s ComboBox control. The DropDown arrow appears quite far from the actual position where it should be. See this image:

How to fix this to make it appear like an ideal DropDownList?

If the image doesn’t appear, click this link: http://postimage.org/image/99yqullkb/

**** Edited (CSS Code) ****

.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
    margin: 0;
    padding: 0px 0px 1px 0px;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    font-size: 13px;
    height: 18px;
    width:200px;
}
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    padding: 0px 0px 10px 0px;
    height: 21px;
    width: 21px;
}
.WindowsStyle .ajax__combobox_itemlist
{
    border-color: #7F9DB9;
}

Answer 1

Looks like a CSS styles side-effect. Check calculated styles for arrow button and it’s container with some tool like FireBug or Developer Tools.
IAE try to apply the style rule below, maybe it fix the issue:

table.ajax__combobox_inputcontainer td
{
    padding: 0 !important;
    text-align: left !important;
}
table.ajax__combobox_inputcontainer td.ajax__combobox_buttoncontainer button
{
    margin-left: 0 !important;
}