No text truncation for multi select dropdown

Description

I’m using the multiselect dropdown and I have quite a few options, close to 11 and most of the times I will have at least 6 selected. When that happens, the text goes under the dropdown arrow and it looks bad.

Repro Steps

Add the following dropdown into a page:

<div class="input-field col s4">
<select multiple>
<option value="" disabled selected>Protocol</option>
<option value="1">HTTP/HTML</option>
<option value="2">Web services/SOAP</option>
<option value="3">Ajax Truclient</option>
<option value="4">Siebel Web</option>
<option value="5">RDP</option>
<option value="6">Oracle NCA</option>
<option value="7">Citrix ICA</option>
<option value="8">Winsocket</option>
<option value="9">SAP GUI</option>
<option value="10">SAP WEB</option>
<option value="11">WAP</option>
</select>
<label>Protocol</label>
</div>

Heres a link to a codepen: http://codepen.io/anon/pen/PpjrWe

Screenshots / Codepen

Issue:

Fix 1: (Expand the text box dynamically like in selectivity.js) Homepage link

Fix 2: (Show the count of the number of items selected) Link to demo

It would be great if you could give the user an option of using either modes.

Thank you!

[DanielRuf]

One possible fix

.select-wrapper input.select-dropdown {
    ...
    padding-right: 10px;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

or

.select-wrapper input.select-dropdown {
    ...
    padding: 0px 10px 0px 0px;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

See http://caniuse.com/#feat=text-overflow and notice also the problems

Does not work in IE8 and IE9 on Some Samsung-based browsers, have a bug with overflowing text when ellipsis is set and if text-rendering is not auto. Does not work on select elements work in Chrome and IE, only Firefox.

[TeeMee123]

I found a fix. If you add the class truncate to the select element, it turns into a different style which puts a white background to the triangle. It might have some weird effects though, you have to include options in the parameters for M.FormSelect.init otherwise it has another drop down appear above it.

The fix mentioned earlier using text-overflow didn’t work for me testing on chrome.