Stretch the Width of dropdown in a bootstrap based on textbox-CodePudding

I have 2 textboxes with combined width must be always 450px

The first one has dropdown menu and the second one doesnt have it

Both textboxes form input-group

The dropdown can switch between any of these 2 anytime

I want the first dropdown width to be same as first textbox width

So even if 450px is changed to 700px in future, the width of dropdown must adapt accordingly.

<!doctype html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>
  

  
  <div  style="width:450px">
  
      <input type="text"  data-bs-toggle="dropdown" value="All Fruits" aria-expanded="false" data-bs-auto-close="outside" readonly>
      
      <input type="text"  value="All Fruits" aria-expanded="false">
      
    <div >
      <div >
        <label >
          <input  type="checkbox" value=""> Fruit1 </label>
        <label >
          <input  type="checkbox" value=""> Fruit2 </label>
        <label >
          <input  type="checkbox" value=""> Fruit3 </label>
        <label >
          <input  type="checkbox" value=""> Fruit4 </label>
      </div>
    </div>
  </div>

  

</body>

</html>

CodePudding user response：

Here's a snippet using JS to set the width of the dropdown menu based on the data-bs-toggle sibling element.

I added a second set of drop downs with a larger width for proof of concept.

Code is commented.

// Get all dropdown menus on the page
let dropdown_menu = document.querySelectorAll('.dropdown-menu');

// foreach one
dropdown_menu.forEach(dd => {
  // get the parent wrapping element
  let parent = dd.parentElement;

  // If that parent has the input-group class, we're in the right spot.
  if (parent.classList.contains('input-group')) {
    // Get the element with the data-bs-toggle attribute's width
    let input_parent = parent.querySelector('[data-bs-toggle]').offsetWidth;
    // set the width on the dropdown
    dd.style.width = input_parent   'px';
  }

});

<!doctype html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>



  <div  style="width:450px">

    <input type="text"  data-bs-toggle="dropdown" value="All Fruits" aria-expanded="false" data-bs-auto-close="outside" readonly>

    <input type="text"  value="All Fruits" aria-expanded="false">

    <div >
      <div >
        <label >
          <input  type="checkbox" value=""> Fruit1 </label>
        <label >
          <input  type="checkbox" value=""> Fruit2 </label>
        <label >
          <input  type="checkbox" value=""> Fruit3 </label>
        <label >
          <input  type="checkbox" value=""> Fruit4 </label>
      </div>
    </div>
  </div>
  
  
  <div  style="width:700px">


<input type="text"  data-bs-toggle="dropdown" value="Value" aria-expanded="false" data-bs-auto-close="outside" readonly>

<input type="text"  value="Here is a long one" aria-expanded="false">

    
    <div >
      <div >
        <label >
          <input  type="checkbox" value=""> Fruit1 </label>
        <label >
          <input  type="checkbox" value=""> Fruit2 </label>
        <label >
          <input  type="checkbox" value=""> Fruit3 </label>
        <label >
          <input  type="checkbox" value=""> Fruit4 </label>
      </div>
    </div>
  </div>



</body>

</html>

EDIT

Using jQuery

$(document).ready(function() {
  $('.dropdown-menu').each(function() {
    $prev_sib_width = $(this).prevAll('[data-bs-toggle]').outerWidth();

    if ($prev_sib_width) {
      $(this).width($prev_sib_width);
    }

  });
});

<!doctype html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>



  <div  style="width:450px">

    <input type="text"  data-bs-toggle="dropdown" value="All Fruits" aria-expanded="false" data-bs-auto-close="outside" readonly>

    <input type="text"  value="All Fruits" aria-expanded="false">

    <div >
      <div >
        <label >
          <input  type="checkbox" value=""> Fruit1 </label>
        <label >
          <input  type="checkbox" value=""> Fruit2 </label>
        <label >
          <input  type="checkbox" value=""> Fruit3 </label>
        <label >
          <input  type="checkbox" value=""> Fruit4 </label>
      </div>
    </div>
  </div>


  <div  style="width:700px">


    <input type="text"  data-bs-toggle="dropdown" value="Value" aria-expanded="false" data-bs-auto-close="outside" readonly>

    <input type="text"  value="Here is a long one" aria-expanded="false">


    <div >
      <div >
        <label >
          <input  type="checkbox" value=""> Fruit1 </label>
        <label >
          <input  type="checkbox" value=""> Fruit2 </label>
        <label >
          <input  type="checkbox" value=""> Fruit3 </label>
        <label >
          <input  type="checkbox" value=""> Fruit4 </label>
      </div>
    </div>
  </div>



</body>

</html>