CODEWITHSUNDEEP
drop-down-menubootstrap-5html-selectbootstrap-select
Joy
Joy

Reputation: 91

Adjust width of drop down and wrap lengthy text

I'm using bootstrap-select in a website, the options contain lengthy texts causing the dropdown menu to extend beyond the width of the select element.

<select class='selectpicker form-control'>
    <option>...</option>
    <option>...</option>
<select>


<!DOCTYPE html>
<html>
<head>
  <link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet'>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css'>
</head>

<body>

  <div class='col-5'>
    <select class='selectpicker form-control' data-selected-text-format="count" multiple>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
      <select>
  </div>


  <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js'></script>


</body>

</html>

Using css I could make the text wrap in the options:

.bootstrap-select .dropdown-menu .dropdown-item { 
    white-space: normal; 
} 


.bootstrap-select .dropdown-menu .dropdown-item {
  white-space: normal;
}
<!DOCTYPE html>
<html>

<head>
  <link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet'>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css'> </head>

<body>
  <div class='col-5'>
    <select class='selectpicker form-control' data-selected-text-format='count' multiple>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
    </select>
  </div>
  <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js'></script>
</body>

</html>

Is there a better approach? Is there any class in bootstrap-select or bootstrap to do so?

Upvotes: 1

Views: 146

Answers (0)

Related Questions