I am facing a frustrating issue. I have a simple DIV element that I want to make scrollable, containing a table inside it. The process should be straightforward as I have a separate .html file with the code that functions correctly.
Here is an excerpt of the code:
<div id="agreement_rate_multiple_view" style="overflow:scroll; height:100px; width:500px;">
<table id="agreement_rates_list">
<thead>
<tr>
<th style="background-color: #CCCCCC">
Quantity
</th>
<th style="background-color: #CCCCCC">
Amount
</th>
<th style="background-color: #CCCCCC">
Effective Date
</th>
<th style="background-color: #CCCCCC">
ExpirationDate
</th>
</tr>
</thead>
<tbody>
(Table content here)
</tbody>
</table>
</div>
The above code works perfectly fine on its own, but when integrated into a Bootstrap modal, the scrollable behavior seems to be overridden by other CSS classes applied to the surrounding elements.
Despite using inline CSS for the scrollable div, it fails to display correctly within the Bootstrap modal. The table's height is not respected, and the scrollbar is missing altogether.
I have provided screenshots comparing the div's appearance in a standalone page versus within the Bootstrap modal.
If you would like to view the original .aspx file, you can access it through the following link:
Original .aspx file
I am seeking assistance in resolving this issue and ensuring that my inline CSS properties take precedence. Any help or advice would be greatly appreciated. Thank you for understanding the language barrier.