I have a modal structured as followed:
<div class="modal fade" id="editSaga" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body row">
<div class="col-7 firstchild">
<div class="firstchild-header">
</div>
<div class="firstchild-body1">
// some content
</div>
<div class="firstchild-body2">
// some other content
</div>
</div>
<div class="col-5">
</div>
<div>
</div>
</div>
I want to make the firstchild-body2 content scroll when its content goes beyond the content of the parent which is the class col-7 with the following style:
.col-7 {
max-height: 100%;
overflow: hidden;
}
I tried to use jquery and get the its height this way:
$(".firstchild-body2").height(`$("#editSaga .modal-content").height()` - $(".firstchild-
header").outerHeight() - $(".firstchild-body1").outerHeight());
but I did not work because I always includes the height of the overflowing elements.
Then I changed the $("#editSaga .modal-content").height() to $(".col-7").height(). but this solution also is not working at all. Any help would be highly appreciated.
I made a working code example for you here: https://codepen.io/solutionsswift/pen/GRvxLOd
To apply the correct scroll inside the firstchild-body2, u need to set its height to auto. Also u need to set the maximum height for the col-7.
With JS u can set the max-height value on the firstchild-body2 element so that it can apply the scrollbar automatically.
Do not forget to set the overflow: auto on the body2!
const header = document.querySelector('.firstchild-header');
const body1 = document.querySelector('.firstchild-body1');
const body2 = document.querySelector('.firstchild-body2');
const col7 = document.querySelector('.col-7');
// Set the max-height = total height of col-7 minus the height of header and
body2.style.maxHeight = col7.offsetHeight - header.offsetHeight - body1.offsetHeight + 'px';.modal-body {
height: 100%;
max-height: 80px;
}
.col-7 {
overflow: hidden;
width: 100px;
height: auto;
background-color: red;
}
.firstchild-body2 {
box-sizing: border-box;
overflow-y: auto;
height: auto;
}<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body row">
<div class="col-7 firstchild">
<div class="firstchild-header">
header
</div>
<div class="firstchild-body1">
Body 1
</div>
<div class="firstchild-body2">
Body 2 sdfsdf sfsdf ssdf sf sd fsd fs fs fs fs
</div>
</div>
<div class="col-5">
</div>
<div>
</div>
</div>