4

I have an ajaxtoolkit AutoCompleteExtender that has position: absolute. I have placed it inside a div with position: relative. This makes the extender dropdown place itself perfectly on all browsers, except on Chrome/Safari, where the position is relative to the top left of the window instead of the div.

When I place another ul with the same css class and inline style as the HTML that is generated for the AutoCompleteExtender, the positioning works fine in Chrome. So there is something specific to the extender that makes it render at the bottom of the HTML code (just before the end tag, and therefore not using the div as it's parent when calculating its position.

Any ideas what I can do to fix this?

Code:

<div class="searching">
<ajaxToolkit:AutoCompleteExtender 
            runat="server" 
            ID="biznameOrCategoryAutoComplete" 
            TargetControlID="txtBizNameOrCategory"
            ServicePath="~/AutoComplete.asmx"
            ServiceMethod="GetBiznameOrCategoryCompletionList"
            MinimumPrefixLength="1" 
            CompletionInterval="1000"
            EnableCaching="true"
            CompletionSetCount="10" 
            CompletionListCssClass="autocomplete_completionCompyNameListElement" 
            CompletionListItemCssClass="autocomplete_listItem" 
            CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
            ShowOnlyCurrentWordInCompletionListItem="true">
        </ajaxToolkit:AutoCompleteExtender>
</div>

CSS:

.searching {
margin-left:5px;
padding-top:10px;
width:366px;
position: relative;
}
.autocomplete_completionCompyNameListElement {
background: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size: 17px;
width: 340px !important;
left: 20px !important;
border: 1px solid #d9d9d9;
font-size: 12px;
top: 48px !important;
padding: 2px 4px !important;
}
Yuriy Rozhovetskiy
  • 22,270
  • 4
  • 37
  • 68
Peter Evjan
  • 2,423
  • 3
  • 32
  • 50

1 Answers1

6

Try to add plain HTML <div> element right after extender with spcified id attribute and use this id value for extender's CompletionListElementID property.

When you pass an id to the extender it will insert the items as <div> elements. So adding a plain HTML <div> rather than a <ul> maintains valid HTML.

Alan Whitelaw
  • 16,171
  • 9
  • 34
  • 51
Yuriy Rozhovetskiy
  • 22,270
  • 4
  • 37
  • 68
  • Hey im having the same problem with this extenders position in ie i tried todo what you suggested but there is no difference http://stackoverflow.com/questions/9288125/autocompleteextender-position-is-wrong-not-directly-under-textbox – ONYX Feb 15 '12 at 05:10
  • When you pass an id to `CompletionListElementID` the items that are inserted into that element are divs. I have edited your answer to suggest inserting a `
    ` instead of a `
      ` to maintain valid HTML
     – Alan Whitelaw Aug 03 '12 at 10:02