is it possible to have multi-line options?

[cyberglot]

Hi folks,

I am in a need to build an select with multi-line options like that:

I've looked intro the examples and the issues and I didn't find a way to implement it. Is it possible?

Thanks.

[t0xicCode]

It's possible to implement using the data-content attribute: http://jsfiddle.net/t0xicCode/454Lqbz8/

[beanvonbaron]

Hi There,
I looked at that option but I am using an asp:DropdownList control for my project.
I don't know how I can use the data-content attribute when the values/options are created server side.
Any advice?
Here is an example of what I am looking for but again it's not using the dropdown controller. http://jsfiddle.net/ZTs42/2/

[EcoFreak]

I managed to fix this by adding this class large-bootstrap-select to the select that in turn is copied to the bs-container class.

<select class="selectpicker large-bootstrap-select" ....

It's important that the white-space rule is present because it changes how the li treats whitespace and in turn break the text.

.bs-container.large-bootstrap-select {
  .dropdown-menu {
    width: 500px;
    li a span.text {
      word-wrap: break-word;
      white-space: normal;
    }
  }
}

Before:

After:

Hope it helps

[rajupatel1000]

How to select box text show in 2 line?
Not working my css in ( Mozilla Browser )...But support in Chrome ...

MY CSS
select {
white-space: normal;
line-height: normal;
}

[jesusgarza]

Seems that Multi-line options no longer works.
I tried the same fiddle, changed the file versions and it doesn't work.
http://jsfiddle.net/t0xicCode/454Lqbz8/

[caseyjhol]

@jesusgarza Multi-line selects should now be working in v1.13.7.

[jesusgarza]

Great Casey, thanks!!

[ispweb]

I want to use multi-line with bootstrap-select, but when i select the option it should display the option value

<select class="selectpicker">
<option data-content="First Line<br>Second Line">Mustard</option>
<option data-content="House Number Street<br>City, State<br>Zip Code">Ketchup</option>
<option data-content="Single line address">Third Address</option>
</select>

So when i select "First Line<br>Second Line" the select should display : Mustard

Is this possible, didn't find a solution on internet jet.