You can overide some css style to achieve the result you want ,
by changing height , and overflow properties to rendered menu item as 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;
}
You can check working snippet here :
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%;
}
.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 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>
</body>
