1 year ago
#74682
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:
Edge/Chrome:
IE when using element highligher :
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