DOJO CheckedMultiSelect 下拉显示垂直滚动条

Question

我正在尝试向 CheckedMultiSelect（下拉）小部件显示垂直滚动条。

我尝试设置 height / overflow-y 属性，但仍然没有成功。

我已经为小部件启用了两个属性，即 multiple="true" 和 dropdown="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。任何帮助，将不胜感激， -普拉尚

Answer 1

您可以覆盖一些 css 样式以获得您想要的结果，通过将 height 和 overflow 属性更改为以 flow

呈现的菜单项

.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>

DOJO CheckedMultiSelect 下拉显示垂直滚动条

DOJO CheckedMultiSelect dropdown show vertical scrollbar

javascript

dojo

dijit.form