Make dropdown width same as textbox width in bootstrap-CodePudding

I want to make dropdown width same as textbox width using bootstrap techniques.

NOTE: The size should be suto ajusted with respect to the width of the texbox and not relative to page 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 >
    <input type="text"  data-bs-toggle="dropdown" value="All Sheets" aria-expanded="false" data-bs-auto-close="outside" readonly>
    <div >
      <div >
        <label >
          <input  type="checkbox" value=""> Sheet1 </label>
        <label >
          <input  type="checkbox" value=""> Sheet2 </label>
        <label >
          <input  type="checkbox" value=""> Sheet3 </label>
        <label >
          <input  type="checkbox" value=""> Sheet4 </label>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

You can add the .w-100 class into the .dropdown-menu div.

Sizes documentation can be found on Bootstrap's webpage

<!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 >
    <input type="text"  data-bs-toggle="dropdown" value="All Sheets" aria-expanded="false" data-bs-auto-close="outside" readonly>
    <div >
      <div >
        <label >
          <input  type="checkbox" value=""> Sheet1 </label>
        <label >
          <input  type="checkbox" value=""> Sheet2 </label>
        <label >
          <input  type="checkbox" value=""> Sheet3 </label>
        <label >
          <input  type="checkbox" value=""> Sheet4 </label>
      </div>
    </div>
  </div>
</body>

</html>