I am using the WYSIWYG editor that is one of the components of MDBootstrap 5 Pro, and I am displaying it in a modal window. Here's the code:
<div class="modal frame fade bottom" id="replyModal" tabindex="-1" aria-labelledby="replyModal" aria-hidden="true">
<div class="modal-dialog modal-frame modal-top">
<div class="modal-content">
<div class="modal-header bcBlue text-white">
<h5 class="modal-title" id="replyTitle">Reply To Post</h5>
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bcLightGray">
<div class="row">
<div class="col-12 text-center">
<div class="wysiwyg" data-mdb-wysiwyg="wysiwyg"
style="width:75%; margin-left: auto; margin-right: auto;
data-mdb-wysiwyg-links-section="false" data-mdb-wysiwyg-textarea-name="ReplyText"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btnPost">Post</button>
<button type="button" class="btn btn-danger" data-mdb-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Everything displays properly, EXCEPT when the text being entered exceeds the height of the editor window. The editor allows the editing window to extend below the bottom edge of the parent modal, which is just ugly.
I did try putting scrollbars on the modal itself, but that screws up the modal and still doesn't solve the issue.
Does anyone know how to add scrollbars to the WYSIWYG editor so that it stays the same size and allows content to scroll rather than cause the editor window to grow?