我试图向CheckedMultiSelect（下拉）小部件显示垂直滚动条。我尝试设置height/overflow-y属性但仍然没有运气。我已启用小部件的两个属性，即 多个“true”和下拉菜单“true”。我正在显示大约 200 个项目，并且列表超出了控件的底部。请参阅下面我的示例代码：<select multiple="true"
dropdown="true"
name="multiselect"
data-dojo-type="dojox/form/CheckedMultiSelect">
<option value="TN">Tennessee</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="TN1">Tennessee</option>
<option value="VA1">Virginia</option>
<option value="WA1">Washington</option>
<option value="FL1">Florida</option>
<option value="CA1">California</option>
<option value="TN1">Tennessee</option>
<option value="TN2">Tennessee</option>
<option value="VA2">Virginia</option>
<option value="WA2">Washington</option>
<option value="FL2">Florida</option>
<option value="CA2">California</option>
<option value="TN2">Tennessee</option>
<option value="TN3">Tennessee</option>
<option value="VA3">Virginia</option>
<option value="WA3">Washington</option>
<option value="FL3">Florida</option>
<option value="CA3">California</option>
<option value="TN3">Tennessee</option></select>DOJO 版本 1.14。任何帮助将不胜感激，-Prashant
1 回答
弑天下
TA贡献1818条经验 获得超8个赞
您可以通过更改渲染菜单项的height和属性来覆盖某些 css 样式来实现您想要的结果。overflow
.dojoxCheckedMultiSelect .dijitMenuTable {
/* fix some rendering issue menu item width table*/
width: 100%;
}
.dojoxCheckedMultiSelectMenu {
/* set scroll-x to scroll and hide y scroll bare*/
overflow: hidden scroll !important;
/* set max height for dropdown menu */
max-height: 150px !important;
}
您可以在此处检查工作片段：
require(["dojo/ready", "dojox/form/CheckedMultiSelect"], function(ready, CheckedMultiSelect) {
ready(function() {
console.log("Hi");
})
});
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
.dojoxCheckedMultiSelect .dijitMenuTable {
/* fix some rendering issue menu item width table*/
width: 100%;
}
#one_menu.dojoxCheckedMultiSelectMenu {
/* set scroll-x to scroll and hide y scroll bare*/
overflow: hidden scroll !important;
/* set max height for dropdown menu */
max-height: 150px !important;
}
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojox/form/resources/CheckedMultiSelect.css" rel="stylesheet" />
<script>
dojoConfig = {
parseOnLoad: true,
async: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<body class="claro">
<select id="one" multiple="true" dropdown="true" name="multiselect" data-dojo-type="dojox/form/CheckedMultiSelect">
<option value="TN">Tennessee</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="TN1">Tennessee</option>
<option value="VA1">Virginia</option>
<option value="WA1">Washington</option>
<option value="FL1">Florida</option>
<option value="CA1">California</option>
<option value="TN1">Tennessee</option>
<option value="TN2">Tennessee</option>
<option value="VA2">Virginia</option>
<option value="WA2">Washington</option>
<option value="FL2">Florida</option>
<option value="CA2">California</option>
<option value="TN2">Tennessee</option>
<option value="TN3">Tennessee</option>
<option value="VA3">Virginia</option>
<option value="WA3">Washington</option>
<option value="FL3">Florida</option>
<option value="CA3">California</option>
<option value="TN3">Tennessee</option>
</select>
<select id="two" multiple="true" dropdown="true" name="multiselect" data-dojo-type="dojox/form/CheckedMultiSelect">
<option value="TN">Tennessee</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="VA1">Virginia</option>
<option value="WA1">Washington</option>
<option value="FL1">Florida</option>
<option value="CA1">California</option>
<option value="TN1">Tennessee</option>
<option value="TN2">Tennessee</option>
<option value="VA2">Virginia</option>
<option value="WA2">Washington</option>
<option value="FL2">Florida</option>
<option value="CA2">California</option>
<option value="TN2">Tennessee</option>
<option value="TN3">Tennessee</option>
<option value="VA3">Virginia</option>
<option value="WA3">Washington</option>
<option value="FL3">Florida</option>
<option value="CA3">California</option>
<option value="TN3">Tennessee</option>
</select>
</body>
添加回答
举报
0/150
提交
取消