Span element is not blockable

[LaurenMae]

The span element used in the dropdown content is not able to be restricted to its parents size. My use case is being able to set the dropdown to a particular size and any options with labels too long having ellipsis applied in the content.

The below screen shot shows a name that is too long for the parent size, the span overflows the parent and the text is unreadable.

The below screen shot shows desired behaviour which can be achieved by swapping the span element for a div element

[sanusart]

Doesn't styling it to block not solving your issue?

[LaurenMae]

Unfortunately not, I can set the display to block or inline block which somewhat fixes the problem. When the drop down is open the content continues to shift and the word wrap is no longer functional as the spans content is still greater than its parent:

[sanusart]

Got it. Will check it out.

[LaurenMae]

Is there any progress on this issue? Thanks

[sanusart]

https://codesandbox.io/s/react-dropdown-select-so9nz

[LaurenMae]

That looks great! 👍 Thank you