One of the challenges I'm facing involves a row with 2 columns - the first column contains a title and the second column features an input group.
Within the input group, there is an icon and a dropdown menu. Unfortunately, the dropdown menu is not occupying the entire width available, unlike a select option would.
Check out the code snippet on jsfiddle: https://jsfiddle.net/326qay2p/1/
Here's the relevant code snippet:
<div class="container-fluid limited">
<div class="row">
<div class="col-md-8 col-xl-9 col-sm-12 d-flex align-items-center bg-info">
<h4 class="font-weight-bold d-inline mb-0"></h4>
<small class="text-muted ml-1">(0)</small>
</div>
<div class="col-md-4 col-xl-3 col-sm-12 bg-danger">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-sort-amount-down"></i></span>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" href="#" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
Aiming to resolve the issue, my main goal is to make sure that the input group with the dropdown menu takes up the entire width within the column. Despite experimenting with the width setting, it tends to create undesired results..