I have a dialog that I open this way
const dialogRef = this.dialog.open( SortedDesComponent,{
width:'calc(100%)',
height:'70rem',
hasBackdrop:true,
} )
and a dialog that looks like that
<div>
<button mat-fab extended (click)="submit()">Attribuer</button>
<button [disabled]="selected" mat-fab extended (click)="manqueDeDE()">Manque de DE</button>
</div>
<div id="wrapper">
<div class="row">
@for ( title of header; track title ) {
<div class="cell">{{ title }}</div>
}
</div>
@for ( row of results; track row ) {
<div class="row content {{ id === row.id ? 'active' : '' }}" #el (mousedown)="select( row )">
<div class="cell"> {{ row.prenom }}</div>
<div class="cell"> {{ row.nom }}</div>
<div class="cell"> {{ row.distance }}</div>
<div class="cell"> {{ row.rayon }}</div>
<div class="cell"> {{ row.absence }}</div>
<div class="cell"> {{ row.retour }}</div>
<div class="cell"> {{ row.m1 }}</div>
<div class="cell"> {{ row.nb_missions }}</div>
<div class="cell"> {{ row.max_mission}}</div>
<div class="cell"> {{ row.rdde}}</div>
</div>
}
</div>
with a scss as so
:host {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
min-height: 100%;
overflow: auto;
width: auto;
}
.row {
display: grid;
grid-template-columns: repeat( 10, 6rem);
grid-template-rows: 1fr;
width:max-content;
}
.row.content:hover:not(.activef) {
color: white;
background-color: #ff408185;
cursor: pointer;
}
button {
margin: 0 1rem;
}
.error {
height: 2rem;
display: block;
}
.active {
color: white;
background-color: #ff4081;
cursor: pointer;
}
.cell {
border:1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
button {
margin-bottom: 1rem;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex-direction: column;
overflow: auto;
}
Now my problem is that the flexbox is outside the dialog.
Centering the flexbox makes my table go outside and overflow ables me to go right but not left. So all the left part of the centered part is not reachable.
I’ve tried pretty much everything without a chance.
I have two options:
- my screen is wide enough and I can see all element centered properly
- my screen is small (mobile mode) all elements are centered and my table is left cropped even when overflow enabled