How to change button position in angular? - html

Question

I want to change the button position in my html code but I got a problem in the j like in the photo below ! I want to put the button in the footer of the modal !
the Output (button in the bottom) :
here is it my code:
<div class="modal-header" >
<h6 class="modal-title" id="modal-basic-title">Notes</h6>
<button type="button" class="close" aria-label="Close" (click)="closemodal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="width:500px ; height:600px; overflow-y: auto" >
<mat-accordion >
<mat-expansion-panel *ngFor="let i of listCategorie" class="parentPanel" >
<mat-expansion-panel-header class="parentPanel_header" (click)="getSouCategories(i.id)" >
<mat-panel-title > {{i.libelle}} {{i.id}}
<span class="badge badge-light " style="position:absolute; right:6em"> {{listCategorie.length}} </span>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-accordion multi>
<mat-expansion-panel style="background-color: #EEDFF5;" class="childPanel childPanelCount" [expanded]="true" hideToggle disabled>
<div class="d-flex mt-2">
<div class="p-2"><p> Nombre des sous catégories </p></div>
<div class="ml-auto p-2">
<span class="badge badge-secondary "> {{listSousCategorie.length}} </span>
</div>
</div>
</mat-expansion-panel>
<ng-container>
<mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled style=" background:#F2EDFF;"
*ngFor="let j of listSousCategorie; ">
<div class="childPanel_body2 mat-badge-large" fxLayout="row" fxFlex fxLayoutAlign="start center">
<div style="padding-left:1em" fxFlex="grow">{{j.libelle}} {{j.id}}</div>
<mat-form-field style="width:50px" appearance="standard">
<form>
<mat-label>Note</mat-label>
<input type="text" matInput name="Note" [(ngModel)]="j.Note_Condidat">
<button type="button" (click)="onSubmit(j)"> ok</button>
</form>
</mat-form-field>
</div>
</mat-expansion-panel>
</ng-container>
</mat-accordion>
</mat-expansion-panel>
</mat-accordion>
</div>
Ts File:
onSubmit(sous) {
this.LExamenSousCategorieService.updateSouCategorie(sous).then(res => {
})
}

Answer 1

i think you should give parent element of button "position: relative" and make your button positioning with "position: absolute; (and margin,padding vs...)"