In my Angular-6 project, I am implementing a Bootstrap-4 modal. The Modal-Header has a fixed height, Modal-Body is scrollable, and Modal-Footer has a variable height but is not scrollable.
Below is a snippet of my basic HTML:
/*for debugging purpose*/
.modal {
display: block !important;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
border-color: #e0e0e7;
padding: 15px 20px 15px 55px;
min-height: 70px;
border-top: 1px solid #e9ecef;
}
.comment-input {
position: relative;
width: 100%;
min-height: 40px;
}
.textarea {
max-height: 80px;
overflow: auto;
width: 100%;
min-height: 40px;
padding: 10px 10px 10px 16px;
word-wrap: break-word;
line-height: 20px;
}
.textarea:empty:not(:focus)::before {
content: 'Type your comments here';
position: absolute;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer">
<div class="comment-input">
<div class="textarea" contenteditable="true"></div>
</div>
</div>
</div>
</div>
</div>I am attempting to make the textarea scrollable once it contains four lines of text. Prior to reaching four lines of text, the modal-footer should expand in height as the textarea grows. Despite utilizing the above HTML and CSS, the modal-footer does not adjust its height according to the textarea. Any suggestions or solutions would be greatly appreciated. Thank you.