Dropdown in Input Group no longer renders correctly in Bootstrap v5 + ng-bootstrap v18 #4817
Description
Hi,
I’d like to reopen or revisit a previously closed issue that appears to be outdated due to changes in Bootstrap v5.
Original issue: #2055
Problem
The suggested solution in the original issue is no longer compatible with the latest versions of Bootstrap and ng-bootstrap. Specifically:
- Bootstrap version: v5.3.3
- ng-bootstrap version: v18.0.0
- Angular version: v19.2.0
In Bootstrap v5, input groups expect buttons to be direct children of .input-group. This breaks the styling when using ngbDropdown, which requires a wrapper element (typically a div with ngbDropdown) around the dropdown button. As a result:
- The button does not visually attach to the input as expected.
- Border radii look broken.
- The layout does not match Bootstrap’s documented expected appearance.
Bootstrap v5 Example (works correctly)
From the official Bootstrap docs:
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>ng-bootstrap Version (causes visual issues)
<div class="input-group mb-3">
<input type="text" class="form-control" />
<div class="d-inline-block" ngbDropdown>
<button id="dropdown" class="btn btn-outline-secondary" ngbDropdownToggle>Dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdown">
<button ngbDropdownItem>Action</button>
<button ngbDropdownItem>Another action</button>
<button ngbDropdownItem>Something else here</button>
<div class="dropdown-divider"></div>
<button ngbDropdownItem>Separated link</button>
</div>
</div>
</div>Live Demo
I've created a StackBlitz demo that clearly shows the issue: https://stackblitz.com/edit/stackblitz-starters-quvd48ws?file=src%2Fmain.ts
Screenshots
Expected look:
Actual look:
Request
Is there a recommended pattern or workaround to achieve a Bootstrap-conformant button with dropdown inside an input group using ngbDropdown in ng-bootstrap v18?