I have a bootstrap modal with two columns in the body.
I want each columns to be scrolled separately (master-detail layout).
body, html { font-size: 10px }<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Header</div>
<div class="modal-body">
<div class="row">
<div class="col overflow-auto">Col1 This might be long</div>
<div class="col overflow-auto">Col2 This must be scrolled separately</div>
</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>CodePudding user response：
You must modify Bootstrap default setting.
First of all, you need to fix the height of the modal on the class .modal-dialog to a 100% without the two margin (top/bottom) of 1.75rem.
Then you must set the .modal-content, .row and .col to a 100% height to make it overflow in your div.
By setting it on .modal-content it will stop the overflow on the page. the rest is to active the overflow:auto, if you dont specify any height on container it wont overflow.
And finaly you set your overflow-y:hidden on your .modal-body
So it should make it with the CSS below:
.modal-dialog{
height:calc(100% - 3.5rem);
}
.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}
.modal-body{
overflow-y:hidden;
}
DEMO
body, html { font-size: 10px }
.modal-dialog{
height:calc(100% - 3.5rem);
}
/* ADDED H-100 instead */
/*.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}*/
.modal-body{
overflow-y:hidden;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content h-100">
<div class="modal-header">Header</div>
<div class="modal-body">
<div class="row h-100">
<div class="col overflow-auto h-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices ultrices erat et auctor. In hac habitasse platea dictumst. Phasellus et rutrum magna. Fusce malesuada feugiat lorem, at aliquam ex convallis vitae. Praesent viverra rhoncus faucibus. Nullam justo enim, congue congue augue venenatis, pellentesque sagittis nisi. Mauris sed luctus quam. In vulputate sed ligula pretium hendrerit. Sed pellentesque, risus in ullamcorper luctus, diam dolor varius ipsum, a tincidunt dolor mi vitae nisl. Integer sed massa a urna mollis cursus.
Praesent mollis magna vitae neque laoreet commodo. Morbi mollis tortor eu posuere maximus. Sed gravida convallis velit, volutpat posuere diam pellentesque ut. Morbi rhoncus congue nunc. Vestibulum dictum scelerisque magna elementum ullamcorper. Morbi vitae nulla lorem. Aliquam suscipit accumsan nulla id laoreet. Suspendisse potenti. Integer convallis odio tortor, non sollicitudin purus vestibulum in. Suspendisse laoreet semper dui. Nunc non nibh tincidunt, imperdiet lacus mollis, venenatis libero. Vivamus pretium et nisi sit amet tempus. Curabitur sodales aliquet condimentum.
Aliquam tincidunt tincidunt enim, vitae rhoncus eros tempor id. Ut porta feugiat tellus ut vulputate. Sed pharetra finibus tortor eu dapibus. Nulla ac scelerisque ipsum. Donec ultricies suscipit neque eu venenatis. Maecenas id placerat libero. Aliquam mattis commodo quam, quis suscipit sapien ullamcorper sagittis. Etiam sem arcu, dictum at ornare quis, pulvinar ut enim. Sed pretium nisl vitae maximus porta. Duis eleifend auctor mauris vitae tempor. Integer hendrerit gravida risus, in tincidunt nibh placerat et. Praesent sit amet justo diam. Nam non suscipit nisi. Cras congue, erat a malesuada luctus, sapien sem elementum eros, ut mattis urna quam posuere nunc. Aenean aliquet augue id dui consequat condimentum.</div>
<div class="col overflow-auto h-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum urna nibh, pretium vitae nisi id, pulvinar eleifend massa. Phasellus fringilla et ante et fermentum. Pellentesque ex arcu, sodales id massa quis, porta placerat magna. Etiam maximus felis massa, quis euismod erat sollicitudin et. Sed vulputate sapien quis magna sagittis placerat. Donec ullamcorper interdum nulla non suscipit. Etiam vehicula libero in sem mattis sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse blandit mollis est, sit amet dapibus nisl imperdiet nec. Fusce quis tortor massa. Nam tempor aliquam auctor. Suspendisse lacinia feugiat ornare. Integer bibendum sodales mauris, id iaculis quam.
Cras accumsan accumsan orci, ac molestie velit. Aenean eu facilisis mi. Quisque et nulla enim. Vestibulum tincidunt mauris ac turpis rutrum pretium. In sagittis velit nisi, a sollicitudin massa ultrices id. Integer at felis elit. Duis mi libero, facilisis suscipit turpis sed, scelerisque consequat nisi. Cras leo dui, efficitur nec iaculis ac, dictum nec nibh. Morbi sed eros purus. Curabitur ultrices euismod ex non sagittis. Duis tincidunt dui ac ante maximus, et eleifend orci euismod.
Pellentesque quis massa nisi. Morbi at diam vel magna imperdiet tristique. Mauris in elementum justo, nec cursus ligula. Duis laoreet vestibulum ex in malesuada. Mauris in nulla efficitur, maximus libero quis, facilisis tellus. Integer faucibus leo et dolor semper ultrices. Maecenas eu imperdiet erat. Vivamus venenatis malesuada nunc eu ultricies. Etiam ornare maximus sollicitudin. Vestibulum faucibus, purus at vestibulum consequat, massa felis scelerisque sapien, vel tempor ex nisi eu ipsum. Etiam vitae massa bibendum, luctus massa in, pellentesque nunc. Aliquam ac purus ut purus scelerisque euismod. Curabitur ultrices eros a eros aliquam pellentesque. Sed bibendum quam ac eros semper, ut ornare elit imperdiet. Nulla facilisi. Phasellus finibus venenatis ipsum, nec viverra quam maximus tempus.
Etiam a viverra sapien. Donec risus metus, egestas quis justo ut, tincidunt lobortis erat. Nulla facilisi. Nunc volutpat, eros et condimentum porttitor, ligula ante blandit mauris, vel vulputate tortor orci at mi. Nam pretium in risus nec placerat. Nunc efficitur vitae quam quis maximus. Vivamus eu justo sit amet mi maximus semper vitae at leo. Fusce gravida ultricies lacinia. Curabitur laoreet sagittis quam in porttitor. Donec at neque ac est fermentum placerat. Fusce consequat sapien nec nunc porta, rutrum blandit ipsum sodales. Nulla egestas blandit metus nec molestie. Nunc facilisis justo massa, vitae aliquet libero mollis sit amet. Donec placerat sollicitudin metus, sit amet eleifend tortor accumsan nec. Phasellus velit ipsum, venenatis eget convallis sit amet, rutrum vitae mauris.
Fusce at faucibus erat. Quisque ex ligula, volutpat id nisi eget, tristique aliquam sapien. In posuere, arcu eget cursus dictum, magna turpis bibendum ipsum, sed fringilla mi tortor ut libero. Vivamus venenatis molestie lorem dignissim gravida. Fusce bibendum aliquam neque eu aliquet. Etiam volutpat rutrum dolor, id ultricies eros. In vel commodo risus, at pretium orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>