Currently, I am referencing this specific documentation as I am interested in constructing a search bar similar to Gmail's layout. The search bar will consist of an input field along with a dropdown button that will display filter options.
Regrettably, the examples provided in the documentation do not address the desired scenario of combining the input field with a dropdown button.
To begin the process, I implemented the following code:
<!-- Search bar-->
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-outline-success" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
</div>
</div>
</div>
Although everything appears to be in order, there is an issue with the dropdown functionality. It seems to be appearing beneath the button instead of expanding to match the width of the input field. My intuition tells me that this can be rectified with the implementation of a suitable CSS rule.