htmlcsstwitter-bootstrap

selected item text in list box becomes trimmed


I have a list box with bootstrap and multiple selection enabled.

The problem is when an option with long text(horizontal scroll is enabled) is selected,the selected option text is truncated to the width of the control (excluding the scroll size).

<select class="form-control" style="overflow-x: auto;" multiple>
  <option>short text1</option>
  <option>These visual representations can convey a vast amount of non-text content. In addition to a short text equivalent, for many data images it may be necessary to provide more detailed information or supplemental content in the form of a long text alternative</option>
  <option>Complex data images include: charts, graphs, and diagrams. They allow sighted users to understand data and data relationships.</option>
</select>

Taste me

Is it possible for the selection not to be trimmed ? Thank you in advance.


Solution

  • A Teammate solved the issue by adding the following CSS

    select > option {
        display: table-row-group;
    }
    

    fiddle link