1 year ago

#74682

test-img

Rohit

AutoCompleteExtender Hiding in IE but working in Edge

We are using AutoCompleteExtender in our project and when checking in IE we don't see the full list but just first element. However, same site works just fine in Edge/Chrome. I did poking around and found that the list/dropdown is there but its somehow hiding behind and just one item hight of data is visible. here is how it looks.

IE:

enter image description here

Edge/Chrome:

enter image description here

IE when using element highligher :

enter image description here

Server side code

<ajaxTK:AutoCompleteExtender    ID="AutoCompleteExtenderGoToOrder" 
                            TargetControlID="txtGlobalOrderKeywords" 
                            runat="server" 
                            MinimumPrefixLength="3"
                            CompletionInterval="500" 
                            CompletionSetCount="20"
                            ServicePath="~/services/dataAjax.asmx"
                            ServiceMethod="GetGoToOrderList"  
                            UseContextKey="true"  
                            OnClientItemSelected="extenderOrderSelected"
                            CompletionListCssClass="autocompletegotoorder_completionListElement"
                            CompletionListItemCssClass="autocompletegotoorder_listItem" 
                            CompletionListHighlightedItemCssClass="autocompletegotoorder_highlightedListItem"
                            /> 

HTML

<DIV id=Header1_divGotoOrder class=gotoOrder>
     <SPAN id=Header1_lblGlobalGoToOrder class=topicHeader style="COLOR: white">Order:</SPAN> 
     <INPUT id=Header1_hdnGlobalOrderID type=hidden name=Header1$hdnGlobalOrderID> 
     <INPUT id=Header1_txtGlobalOrderKeywords style="WIDTH: 50%" value=metr name=Header1$txtGlobalOrderKeywords autocomplete="off">
     <UL id=Header1_AutoCompleteExtenderGoToOrder_completionListElem class=autocompletegotoorder_completionListElement style="WIDTH: 463px; POSITION: absolute; LEFT: 1405px; Z-INDEX: 1000; DISPLAY: none; TOP: 30px; VISIBILITY: hidden"></UL> 
</DIV>

CSS

.autocompletegotoorder_completionListElement
{
  padding-bottom: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  position: absolute;
  z-index: 9999 !important;
 
  visibility: hidden;
  margin-left: -1px !important;
  margin-top: 0px !important;
  background-color: #F1F0F0;
  color: windowtext;
  border: buttonshadow;
  border-color: Black;
  border-width: 1px;
  border-style: solid;
  cursor: 'default';
  overflow: auto;
  height: 200px;
  text-align: left;
  list-style-type: none;
}
/* AutoComplete highlighted item */
.autocompletegotoorder_highlightedListItem
{
  list-style-type: none;
  font-family: Tahoma;
  font-size: 11px;
  color: White;
  text-decoration: none;
  background-color: Navy;
  cursor: pointer;
  cursor: hand;
  padding: 0px 0px 0px 3px;
  margin: 0px;
  text-align: left;
  line-height: 20px !important;
}
/* AutoComplete item */
.autocompletegotoorder_listItem
{
  line-height: 20px !important;
  background-color: #F1F0F0;
  padding: 0px 0px 0px 3px;
  margin: 0px;
  font-family: Tahoma;
  font-size: 11px;
  color: black;
  cursor: default;
  text-decoration: none;
  text-align: left;
}

css

internet-explorer

autocompleteextender

0 Answers

Your Answer

Accepted video resources