How can I make a dynamically created row expand to stretch across the full width when it is...

This is the current context:

current view

and sometimes if viewport is smaller, new row doesn't stretch the full width

current view smaller

The idea is, new row created dinamically should stretches across the full width when user clicks on an item card. But currently, It only stretches to the same width as the card that 'generated' it.

<div class="component-lane-list" data-testId="lane-list">
@for (laneItem of data?.laneList; track laneItem.id) {
<div class="lane-item-container">
<widget-component-lane-item
[data]="laneItem"
(selected)="handleSelected($event)"
data-testId="lane-item"
/>
@if (selectedItem === laneItem.id) {
<div class="area-location-list" role="area-location-list">
placeholder
</div>
}
</div>
}
</div>


.component-lane-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs, 4px);

.lane-item-container {
display: flex;
flex-direction: column;

.area-location-list {
background-color: var(--surface-primary, #ffffff);
height: 72px;
}
}
}


export class LaneListComponent {
@Input()


data?: Model.Data;

@Input()
config?: Model.Config;

@Output()
selected = new EventEmitter<string>();

selectedItem?: string;

handleSelected(id: string) {
this.selected.emit(id);
this.setupSelectedRow(id);
}

private setupSelectedRow(id: string) {
if (this.selectedItem === id) {
this.selectedItem = undefined;
} else {
this.selectedItem = id;
}
}


If add width: 100% on container

.lane-item-container {
display: flex;
flex-direction: column;
width: 100%;
}


it breaks layout

break layout

if add width:400px on placeholder:

.area-location-list {
background-color: var(--surface-primary, #ffffff);
height: 72px;
width: 400px;
}


move nexts items from their original positions move items

if add position relative on container and absolute on placeholder:

.component-lane-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs, 4px);

.lane-item-container {
display: flex;
flex-direction: column;
position: relative;

.area-location-list {
background-color: var(--surface-primary, #ffffff);
height: 72px;
width: 400px;
position: absolute;
top: 50px;
width: 100%;
}
}
}


overslapping new 'row' with it's item card generator

Continue reading...