DOJO CheckedMultiSelect 下拉列表显示垂直滚动条
我试图向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
慕村9548890浏览 97回答 1
1回答
-
弑天下
您可以通过更改渲染菜单项的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>
随时随地看视频慕课网APP
相关分类
JavaScript