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/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div >
<div >
<label for="FB">Filter by:</label>
<select 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 >
<label for="FB">Data Range:</label>
<select 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>CodePudding user response：
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/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div >
<div >
<label for="FB">Filter by:</label>
<select 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 >
<label for="FB">Data Range:</label>
<select 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>CodePudding user response：
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/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<div >
<label for="FB">Filter by:</label>
<select 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 >
<label for="FB">Data Range:</label>
<select 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>