Question

0

280

Views

How to make select dropwdown width same?

I want to make the same width of both select. Mean I want both select width same irrespective of option value I want to make the same width of both select. Mean I want both select width same irrespective of option value

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> 
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script> 
   
</head>
<body>
   
            <div class="col-lg-3">
               <div class="d-flex justify-content-around mb-3">
                  <label for="FB">Filter by:</label>
               <select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
                  <option selected>Emplyee A</option>
                  <option value="1">Emplyee B</option>
                  <option value="2">Emplyee C</option>
                  <option value="3">Emplyee D</option>
                </select>
               </div>
               <div class="d-flex justify-content-around">
                  <label for="FB">Data Range:</label>
               <select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
                  <option selected>This Week</option>
                  <option value="1">Last Week</option>
                  <option value="2">Last month</option>
                  <option value="3">Last quater</option>
                  <option value="4">Custom range</option>
                </select>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

You can modify your select element to have an explicit width: run snippet below.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> 
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script> 
   <style type="text/css">
       .form-select {
           width:200px
       }
   </style>
</head>
<body>
   
            <div class="col-lg-3">
               <div class="d-flex justify-content-around mb-3">
                  <label for="FB">Filter by:</label>
               <select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
                  <option selected>Emplyee A</option>
                  <option value="1">Emplyee B</option>
                  <option value="2">Emplyee C</option>
                  <option value="3">Emplyee D</option>
                </select>
               </div>
               <div class="d-flex justify-content-around">
                  <label for="FB">Data Range:</label>
               <select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
                  <option selected>This Week</option>
                  <option value="1">Last Week</option>
                  <option value="2">Last month</option>
                  <option value="3">Last quater</option>
                  <option value="4">Custom range</option>
                </select>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-05T12:44:32.968Z

I think it should be as simple as using CSS to set the width of the select elements in question:

select{ width: 16ch; }

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> 
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script> 
   
</head>
<body>
   
            <div class="col-lg-3">
               <div class="d-flex justify-content-around mb-3">
                  <label for="FB">Filter by:</label>
               <select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
                  <option selected>Emplyee A</option>
                  <option value="1">Emplyee B</option>
                  <option value="2">Emplyee C</option>
                  <option value="3">Emplyee D</option>
                </select>
               </div>
               <div class="d-flex justify-content-around">
                  <label for="FB">Data Range:</label>
               <select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
                  <option selected>This Week</option>
                  <option value="1">Last Week</option>
                  <option value="2">Last month</option>
                  <option value="3">Last quater</option>
                  <option value="4">Custom range</option>
                </select>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

0

280

How to make select dropwdown width same?

2 answers

0

0

Find remote jobs

Andres GPT