Currently, I have a header with a title and several buttons that can be dynamically added. It's crucial to me that these buttons wrap properly within the container.
The challenge is that these buttons are injected through Angular as an external component, likely placed inside a div.
In the demonstration on this codepen, I display the desired outcome (blue) compared to the current result (red). For a clearer view, you can access the codepen here. Specifically, I want each button to wrap individually instead of wrapping as a group.
.flex-row {
display: flex;
flex-flow: row wrap;
}
.red {
background: red;
}
.blue {
background: blue;
}<div class="flex-row red">
<h1>Really long annoying header goes here</h1>
<div>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
</div>
</div>
<div class="flex-row blue">
<h1>Really long annoying header goes here</h1>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
</div>Additionally, here is the content of selection-buttons.component.html:
<button class="selectionbtn selectbtn" *ngFor="let btn of input.items;let idx = index" (click)="onSelect(idx)" [ngClass]="{'first': idx === 0, 'last': idx === input?.items?.length -1, 'active': currIndex === idx }" value="idx">{{btn.label | translate}}</button>
I made sure to eliminate the surrounding div where the buttons were previously being created, assuming that when called, they would simply appear within the existing div. However, it doesn't seem to work as expected.