Today, I came across a peculiar issue. Adding the overflow: hidden style to a div seems to create extra blank space around its header content, resembling margin or padding. While this might go unnoticed in most cases, it's causing a problem with an animation I'm working on. Initially, I thought the animation was faulty, but after thorough investigation, I traced it back to this styling issue.
Here is the code snippet with overflow:
<div style="overflow:hidden">
<ng-content select="wizard-step"></ng-content>
</div>
The ng-content produces the following output:
<h5><strong>testing bootstrap header</strong></h5>
<search-select #select [placeholder]="'Search audiences...'" (selected)="onSelected($event); select.text = ''" [template]="template" property="name" [items]="catalogAudiences | filterAudiences:audiences"></search-select>
<div class="mt-3">
<div *ngIf="!audiences?.length" class="alert alert-primary">
No audiences added.
</div>
<audiences-list (remove)="onRemove($event)" [readOnly]="true" [audiences]="audiences"></audiences-list>
</div>
Here's how it appears: https://i.sstatic.net/pyP6V.png
Observe the arrows indicating the extra space caused by the issue. For comparison, removing the style="overflow:hidden" yields a different result:
https://i.sstatic.net/TBRgQ.png
It may be subtle, but it seems like the "testing bootstrap header" is inheriting unwanted margins when the div has overflow: hidden, disrupting my animation. How can I resolve this?
For context, I am using Bootstrap 4 and Angular 5. Any insights would be greatly appreciated.