Greetings! I have recently upgraded Bootstrap from version 3.3.X to 4.1 and am encountering an issue with modals not behaving as expected.
Within a standard bootstrap Modal box on a page, the code looks like this:
<!-- language:all lang-html -->
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-success">
<h1 class="modal-title"></h1>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
//Content with jquery-ui DatePickers and Tooltips using absolute positioning
</div>
</div>
</div>
</div>
To give the modal box a maximum height nearly equal to the viewport height with a vertical scrollbar if needed, I added the following CSS:
CSS:
#myModal .modal-body { max-height: calc(100vh - 200px); overflow-y: auto; }
The issue arises when the DatePickers and tooltips within the modal appear "under" the modal backdrop and create an unwanted horizontal scrollbar if they are near the border. The previous version of Bootstrap handled this differently by displaying these elements on top of the backdrop when necessary.
I am seeking a workaround in Bootstrap 4 to achieve the same behavior as in Bootstrap 3. Adjusting z-index values or setting overflow-x to visible did not yield the desired results due to stacking context related to display flex.
While avoiding scenarios where these elements reach the border is one approach, I am interested in exploring potential workarounds.
I have created a Fiddle example to demonstrate the issue with hovering tooltips, which also applies to DatePickers:
https://jsfiddle.net/psarag/g7dr1tcs/46/
Thank you for your assistance!