CSS: dynamic height via textarea
How to make container modal adapt to size when dragging or resizing textarea? This is modal, by the way. Currently when I resize the textbox it overflows out of the container.
Below are my CSS and 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>
+3
source to share
2 answers
See if you want something like this ...
.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>
+1
source to share
You can change the following things:
- Set
display: inline-block
tocontainer
to select the size of the content. And replacewidth: 600px
bothheight: 400px
withmin-width: 600px
andmin-height: 400px
. - No need for absolute positioning for
container
. For centering, you can use flexbox here.
Demo:
.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>
0
source to share