J'ai un bouton Modifier le projet. En cliquant sur le bouton Modifier, une fenêtre contextuelle apparaît et je peux modifier les champs.
Actuellement, tout fonctionne bien, mais la mise en page a l'air moche car je dois faire défiler vers le bas pour cliquer sur le bouton Enregistrer / Annuler. Je souhaite ajuster ma fenêtre contextuelle de manière à ne pas avoir à faire défiler vers le bas.
Ma page d'édition html est:
.container {
border-radius: 4px;
box-sizing: border-box;
overflow: auto;
outline: 0;
width: 500px;
height: 250px;
min-height: inherit;
max-height: inherit;
}
.form {
display: flex;
padding-top: 6px;
}
.mat-form-field {
font-size: 16px;
flex-grow: 1;
}
Mon CSS est:
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="card">
<div class="card-header">
<h5 class="title">Update Project</h5>
</div>
<div class="container">
<form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">
<div class="form">
<mat-form-field color="accent">
<input matInput #input class="form-control" placeholder="Project Name" [(ngModel)]="data.projectName"
name="projectName" required>
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
<!--Textarea for demo purposes-->
<div class="form">
<mat-form-field color="accent">
<textarea matInput #input class="form-control" placeholder="Description" [(ngModel)]="data.projectDescription"
name="projectDescription" required></textarea>
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="data" (click)="stopEdit()">Save</button>
<button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
4 Réponses :
Utilisez la propriété overflow et définissez-la sur hidden pour le conteneur qui défile.
https://developer.mozilla.org/en-US / docs / Web / CSS / overflow
Vous devez définir la hauteur sur le .modal-body et lui donner overflow-y: hidden. Réinitialisez également la valeur de débordement de .modal-dialog sur
.modal{
display: block !important; /* I added this to see the modal, you don't need this */
}
/* Important part */
.modal-dialog{
overflow-y: hidden !important
}
.modal-body{
height: 250px;
overflow-y: hidden;
}
Exemple de travail - http: //www.bootply.com/T0yF2ZNTUd
J'ai ajouté la hauteur minimale de la fenêtre au CSS et cela a fonctionné.
.container {
border-radius: 4px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: hidden !important;
outline: 0;
width: 500px;
height: 250px;
min-height: inherit;
max-height: inherit;
.mat-dialog-content {
min-height: 35vh;
}
Exemple
overflow-x: hidden; overflow-y: hidden !important;
Ensuite, ajoutez-les aux lignes de code ci-dessous à la racine div que vous voulez faire défiler
height: 200px; or height: 30%;
salut, pouvez-vous envoyer un lien jsfiddle. je ne peux pas le reproduire. Merci