In my application I have 2 columns, left side are the controls and right side are the settings of these controls, on of the settings is set by an NgbDropdown. So I have this issue with my NgbDropdown where it gets clipped by the column next to it like so:
The position is set to absolute and also tried to set the z-index higher than the left column, which didn't work. I have also tried the container="body" solution, which actually does the job but then the dropdown doesn't stick to the inputfield (floats when you start scrolling). I'm looking for either a solution with the container="body" attribute or a CSS and/or JS one to overlap the column or trigger the overflow-x when the settings column becomes too narrow
current css
.dropdown-menu{
max-width: 290px!important;
max-height: 200px!important;
overflow: auto;
top: 7px!important;
position: absolute!important;
left:0;
z-index: 1000!important;
}current html
<div class="form-group margin">
<label for="validator">Validator <i class="mdi mdi-information" placement="bottom" container="body"></i></label>
<div class="input-group">
<input class="form-control bg text-white" name="validator" id="validator" [(ngModel)]="selected[0].validator">
<div class="input-group-append">
<span class="input-group-text">
<div class="btn-group">
<div ngbDropdown>
<a class="dropdown-toggle" ngbDropdownToggle></a>
<div ngbDropdownMenu class="bg">
<div ngbDropdownItem *ngFor="let validator of validators; let i = index">
<a (click)="addValidator(validator.expression)">
<p></p>
<p></p>
</a>
<div></div>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
</div>