Is there a way to match the width of a bootstrap dropdown menu with its parent input group?
<div id="ddl_1" class="input-group">
<input type="text" class="form-control ">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
aria-haspopup="true" aria-expanded="true"
data-toggle="dropdown"
data-boundary="viewport"
data-reference="parent"
data-target="#ddl_1">
</button>
<div class="dropdown-menu">
<div class="dropdown-item">Name 0</div>
<div class="dropdown-item">Name 1</div>
<div class="dropdown-item">Name 2</div>
<div class="dropdown-item">Name 3</div>
<div class="dropdown-item">Name 4</div>
</div>
</div>
</div><!-- end input group -->
Please note that I have utilized
data-boundary="viewport"
in this setup because it is placed within a scrollable container and may exceed the boundaries.