Long label issue on dropdown menu

[edionmelarosa]

The issue shows up when a label text is longer than dropdown menu width.

see replication here:

https://codepen.io/edionme-apdian-gubalane/pen/roxrgq

[antonkru]

Not a good solution. The issue is that blue background is only the width of the visible area and the text is white. So this issue does not happen for wide items that are not highlighted in blue.

[dvdbng]

There are a couple of CSS workarounds this issue, one is to make the parent a flex container and make the children have min-width: 100%:

.vs__dropdown-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.vs__dropdown-option {
  min-width: 100%;
}

The other is to make the options display: table

.vs__dropdown-option {
  display: table;
  min-width: 100%;
}

I haven't figured out a way to make all of the options the same width (the width of the longest element) so that the blue thing always covers until the end of the selected element without changing the markup, but at least this way you see the whole element

[sebix]

I'm using this to wrap the option's texts:

.vs__dropdown-option {
    overflow-wrap: anywhere;
    white-space: initial;
}