Issue: Dropdown longer texts are trimmed out of view

[echoworxdev]

Hi there,
I am using OfficeUIFabric Core 5.0.0 with with OfficeUIFabricJS 1.2.0 for building an Office365 add-in.

The Dropdown component trims longer texts out of the view as shown below:

Kindly look into it.
Thank you

[leddie24]

Hi @echoworxdev , I'm having difficulty reproing this bug. Can you post some example code or a codepen possibly?

[echoworxdev]

Hi there,
Thanks for the immediate response.
I forgot to mention, this happens only when the screen is resized to smaller size.

Below is the code snippet and a screenshots.

<div id="mydDown" class="ms-Dropdown" tabindex="0">
        <label  class="ms-Label">Dropdown label</label>
        <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
        <select id="myselect" class="ms-Dropdown-select">
            <option>This is a really long text that demonstartes the problem I am facing.</option>
            <option>Thank You</option>           
        </select>
</div>

Normal Screen:

Smaller Screen:

P.S: It is preferable try the code snippet in Compose Mode to better understand the glitch.

[ericthompson]

Thanks for the extra detail, @echoworxdev!

We've chatted with some of our Designers and the usage guidance for the control asks for using "shortened statements or words" implying that long strings don't make for the best options in the dropdown.

In this case, we'd recommend avoiding using long strings. Radio buttons would be much better suited, since the text can wrap to multiple lines.

[ericthompson]

As I was typing, @leddie24 was building a perfectly suitable fix 👍

It's now merged and allows the dropdown to truncate at the ends in the event of a long string. Good work @leddie24!