CSS: Hauteur dynamique via textarea

Question

Comment faire pour que le conteneur de modal s'adapte en taille lorsque textarea est déplacé/redimensionné? C'est d'ailleurs un modal. Actuellement, lorsque je redimensionne la zone de texte, elle déborde du conteneur.

Voici mon CSS et HTML:

.dialog-box { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top:0; 
 
    left:0; 
 
    z-index: 1000; 
 
} 
 
.dimmer { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    top:0; 
 
    left:0; 
 
    z-index: -1; 
 
} 
 
.container{ 
 
    background-color: #fff; 
 
    width: 600px; 
 
    height: 460px; 
 
    position: absolute; 
 
    border-radius: 5px; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
    margin: auto; 
 
    border: 1px solid #ebebeb; 
 
    padding: 20px; 
 
    align-items: center; 
 
    z-index: 1; 
 
}

<div class="dialog-box" *ngIf="showDialogBox"> 
 
    <div class="dimmer" (click)="hide()"></div> 
 
    <div class="container" > 
 
    <h3> 
 
     <ng-content></ng-content> 
 
    </h3> 
 
    <form class="ui form" [formGroup]="dialogForm" novalidate> 
 
     <div class="field required"> 
 
      <label>Name</label> 
 
      <input type="text" class="name" formControlName="name" placeholder="Enter Name..." maxlength="100" required/> 
 
     </div> 
 
     <div class="field"> 
 
      <label>Remarks</label> 
 
      <textarea class="remark" formControlName="remark" placeholder="Enter Remarks..." maxlength="1000"></textarea> 
 
     </div> 
 
    </form> 
 
    <ng-content select="[action]"></ng-content> 
 
    </div> 
 
</div>

Answer 1

Voyez si vous vouliez quelque chose comme ça ...

.dialog-box { 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    /* become a flex-container */ 
 
    display: flex; 
 
    /* center flex-items vertically */ 
 
    align-items: center; 
 
    /* center flex-items horizontally */ 
 
    justify-content: center; 
 
} 
 

 
.dimmer { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 

 
.container { 
 
    background-color: #fff; 
 
    /* take size of content */ 
 
    display: inline-block; 
 
    /* setting minimum size */ 
 
    min-width: 600px; 
 
    max-width: calc(100% - 30px); 
 
    min-height: 400px; 
 
    max-height: calc(100% -30px); 
 
    border-radius: 5px; 
 
    border: 1px solid #ebebeb; 
 
    padding: 20px; 
 
    z-index: 1; 
 
    margin: 30px; 
 
} 
 
.remark{ 
 
    max-height:70vh; 
 
    max-width:60vw; 
 
}

<div class="dialog-box" *ngIf="showDialogBox"> 
 
    <div class="dimmer" (click)="hide()"></div> 
 
    <div class="container"> 
 
    <h3> 
 
     <ng-content></ng-content> 
 
    </h3> 
 
    <form class="ui form" [formGroup]="dialogForm" novalidate> 
 
     <div class="field required"> 
 
     <label>Name</label> 
 
     <input type="text" class="name" formControlName="name" placeholder="Enter Name..." maxlength="100" required/> 
 
     </div> 
 
     <div class="field"> 
 
     <label>Remarks</label> 
 
     <textarea class="remark" formControlName="remark" placeholder="Enter Remarks..." maxlength="1000"></textarea> 
 
     </div> 
 
    </form> 
 
    <ng-content select="[action]"></ng-content> 
 
    </div> 
 
</div>

Answer 2

Vous pouvez changer les choses suivantes:

• Set display: inline-block pour container prendre la taille du contenu. Et remplacer width: 600px et height: 400px par min-width: 600px et min-height: 400px. Aucun besoin de positionnement absolu pour container. Pour le centrage, vous pouvez utiliser flexbox ici.

Démo:

.dialog-box { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1000; 
 
    /* become a flex-container */ 
 
    display: flex; 
 
    /* center flex-items vertically */ 
 
    align-items: center; 
 
    /* center flex-items horizontally */ 
 
    justify-content: center; 
 
} 
 

 
.dimmer { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 

 
.container { 
 
    background-color: #fff; 
 
    /* take size of content */ 
 
    display: inline-block; 
 
    /* setting minimum size */ 
 
    min-width: 600px; 
 
    min-height: 400px; 
 
    border-radius: 5px; 
 
    border: 1px solid #ebebeb; 
 
    padding: 20px; 
 
    z-index: 1; 
 
}

<div class="dialog-box" *ngIf="showDialogBox"> 
 
    <div class="dimmer" (click)="hide()"></div> 
 
    <div class="container"> 
 
    <h3> 
 
     <ng-content></ng-content> 
 
    </h3> 
 
    <form class="ui form" [formGroup]="dialogForm" novalidate> 
 
     <div class="field required"> 
 
     <label>Name</label> 
 
     <input type="text" class="name" formControlName="name" placeholder="Enter Name..." maxlength="100" required/> 
 
     </div> 
 
     <div class="field"> 
 
     <label>Remarks</label> 
 
     <textarea class="remark" formControlName="remark" placeholder="Enter Remarks..." maxlength="1000"></textarea> 
 
     </div> 
 
    </form> 
 
    <ng-content select="[action]"></ng-content> 
 
    </div> 
 
</div>