我正在Google MDL中使用UL标签在输入上提供弹出菜单。以下是CSS
.ie-specific{
-ms-overflow-style:scrollbar;
max-height:300px;
}
和HTML标记
<div class="page-content">
<!-- Specialty Selection -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col"></div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-selectfield mdl-js-selectfield">
<input class="mdl-textfield__input" type="text" id="Specialty">
<label class="mdl-textfield__label" for="sample2">Specialty</label>
<div class="">
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect ie-specific" for="Specialty" id="SpecialtyList" style="overflow-y:scroll; max-height:300px;">
</ul>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col"></div>
</div>
</div>
UL是由JS查询构建的,该JS查询获取查询结果并将其用于构建选项;
$(document).ready(function () {
$.ajax({
url: "GetSpecialties.ashx",
cache: false,
success: function (data) {
var parent = document.getElementById("SpecialtyList");
data.forEach(function(el) {
var li = document.createElement("li");
var liClass = document.createAttribute("class");
liClass.value = "mdl-menu__item"
li.setAttributeNode(liClass);
li.innerText = el.Name;
parent.appendChild(li);
componentHandler.upgradeDom(parent);
});
}
});
});
在Chrome浏览器中出现问题时,我得到了滚动条,并可以使用它来滚动选项;在IE中,滚动条被禁用,您无法滚动以查看后面的选项。
我同时使用了JQuery和Google Material Design Light