Quiero hacer el mismo ancho de ambos seleccionados. Quiero decir que quiero que ambos seleccionen el mismo ancho, independientemente del valor de la opción. Quiero que ambos seleccionen el mismo ancho. Quiero decir que quiero que ambos seleccionen el mismo ancho independientemente del valor de la opción
<!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>Creo que debería ser tan simple como usar CSS para establecer el ancho de los elementos seleccionados en cuestión:
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>Puede modificar su elemento de select para que tenga un ancho explícito: ejecute el fragmento a continuación.
<!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>