1

i have multiple multi select drop downs on a page,for example

i have a drop down that lists the months as follows

enter image description here

html

<div class="col s12 m6 l3">

<select multiple md-select value.bind="selectedMonth">
    <option value="" disabled>Month</option>
    <option repeat.for="month of months" value.bind="month">${month</option>
</select>
                    
</div>

so when the user is done selecting the items and the items is too long to display in the width of the box it starts to get cut off as follows.

enter image description here

i cant change the column size of the div because i need it to be that column width. is there a way i can get it to display on the next line like

enter image description here

or even as follows

enter image description here

deanpillow
  • 121
  • 1
  • 10
  • Removing `white-space: nowrap` from `.md-select-value>span:not(.md-select-icon)` appears to do the trick (tested with the examples from https://material.angularjs.org/latest/demo/select) – CBroe Jul 20 '22 at 12:59
  • i tried this and its not working (i am using aurelia https://aurelia-ui-toolkits.github.io/demo-materialize/#/samples/select/multiple) – deanpillow Jul 20 '22 at 15:37
  • That appears to be using a single text input field to display the list of choices. I don't know of any trivial way to make that display across multiple lines. – CBroe Jul 21 '22 at 06:15

0 Answers0