Search code examples
javascriptdojodijit.form

DOJO CheckedMultiSelect dropdown show vertical scrollbar

I'm trying to show vertical scrollbar to CheckedMultiSelect (dropdown) widget.

I tried to set height / overflow-y properties but still no luck.

I've enabled both properties to widget i.e. multiple="true" and dropdown="true".

I'm showing approx 200 items and list is going beyond bottom of the control.

See my sample code below :

<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 version 1.14. Any help would be appreciated, -Prashant

Solution

  • 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%;
}

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