AutoCompleteExtender 隐藏在 IE 中,但在 Edge 中工作

AutoCompleteExtender Hiding in IE but working in Edge

提问人:Rohit 提问时间:1/20/2022 最后编辑:Rohit 更新时间:1/21/2022 访问量:63

问:

我们在项目中使用 AutoCompleteExtender,在签入 IE 时,我们看不到完整列表,而只看到第一个元素。但是,同一站点在 Edge/Chrome 中运行良好。我四处逛了逛,发现列表/下拉列表在那里,但它以某种方式隐藏在后面,只有一个项目高数据是可见的。这是它的样子。

IE浏览器:

enter image description here

边缘/铬:

enter image description here

使用元素高亮时的 IE :

enter image description here

服务器端代码

<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 自动完成扩展程序

评论

0赞 Xudong Peng 1/21/2022
根据您的描述,我用这个控件做了一些测试,我发现它工作正常(在 IE 和 Edge 中),我发现您提供的是渲染后的代码,如果可能的话,您能提供源示例代码给我们重现问题吗?这将有助于解决问题。此外,您可以查看 Edge IE 模式是否存在相同的问题。
0赞 Rohit 1/21/2022
我已经进行了更新。
0赞 Xudong Peng 1/24/2022
不幸的是,我重新测试了这一点,但仍然无法重现该问题,它工作正常。这是测试的示例结果。所以我不确定是否有其他脚本或样式设置会影响该结果。您也可以尝试测试我的例子,看看是否存在这样的问题。

答: 暂无答案