Bootstrap-select: is it possible to have multi-line options?

Created on 21 Mar 2014 · 7Comments · Source: snapappointments/bootstrap-select

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.

question

Source

cyberglot

Most helpful comment

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

EcoFreak on 4 Apr 2017

👍4 🎉1

All 7 comments

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

t0xicCode on 12 Aug 2014

👍3

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/

beanvonbaron on 23 Mar 2017

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

EcoFreak on 4 Apr 2017

👍4 🎉1

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;
}

my select box images

rajupatel1000 on 8 Oct 2018

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/