1
votes

Comment supprimer la barre de défilement verticale de la fenêtre contextuelle angulaire

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>


1 commentaires

salut, pouvez-vous envoyer un lien jsfiddle. je ne peux pas le reproduire. Merci


4 Réponses :


0
votes

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


0 commentaires

0
votes

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


0 commentaires

1
votes

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;
}


0 commentaires

0
votes
  1. Donne une hauteur fixe pour le défilement vertical. Donnez une largeur fixe pour le défilement horizontal.
  2. Exemple

    overflow-x: hidden;
    overflow-y: hidden !important;
    
    1. Ensuite, ajoutez-les aux lignes de code ci-dessous à la racine div que vous voulez faire défiler

      height: 200px;
      
      or
      
      height: 30%;
      

0 commentaires