3

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

1 Answer 1

Reset to default
2

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>

4
  • Thank you @Sadhil, working fine !!! one additional question - this applies to all multiselect check widgets. Any idea how to apply this change to only specific widget? I tried to add #selectId before css but doesn't work.
    – prashant
    Commented Nov 30, 2020 at 5:41
  • 1
    @prashant that's simple, put an id by example #myid for your select then in the css , just put #widget_myid.dojoxCheckedMultiSelectMenu { ... } to apply style only to this ,
    – Bourbia Brahim
    Commented Nov 30, 2020 at 19:52
  • 1
    also if you want muliple just put class selector and apply style scroll to that class
    – Bourbia Brahim
    Commented Nov 30, 2020 at 19:53
  • 1
    Thank you Sadhil, Really appreciate your help
    – prashant
    Commented Dec 1, 2020 at 23:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.