0

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;
}
Rohit
  • 1,520
  • 2
  • 17
  • 36
  • According to your description, I did some tests with this control and I found that it works fine (both in IE and Edge), and I found that what you provided is the code after rendering, if possible, can you provide the source sample code to for us to reproduce the problem? This will help solve the problem. Also, you can see if Edge IE mode has the same issue. – Xudong Peng Jan 21 '22 at 09:25
  • I have made the update. – Rohit Jan 21 '22 at 11:02
  • Unfortunately, I re-tested this and still can't reproduce the issue, it works fine. This is the example [result](https://i.stack.imgur.com/FWG99.png) of the test. So I'm not sure if there are other scripts or style settings that affect that result.You can also try to test my example to see if there is such a problem. – Xudong Peng Jan 24 '22 at 09:59

0 Answers0