No text truncation for multi select dropdown

[karanrajpal14]

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!

[fega]

This is the same issue #633

@Dogfalo, I also agreed with the fact that this kind of behavior looks weird and could be avoided easily. Will do you maintain your opinion about it?

[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.

[karanrajpal14]

@DanielRuf the workaround did work, thank you very much! It will suffice until the issue is fixed. 👍

[DanielRuf]

@fega do we need a PR? Should I prepare one? @tomscholz thoughts against / for this fix?

[alexwbaumann]

While the suggested text-overflow makes the value display nicer. In my case, it would be more valuable to see all of the options that have been selected. What if the input were changed to a textarea so the value display could show multiple lines?

[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.