ui-scroll is not working with bootstrap modal?
shinorz0721 opened this issue · 1 comments
shinorz0721 commented
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<ul class="viewport" ui-scroll-viewport>
<li ui-scroll="item in datasource" adapter="adapter" buffer-size="5">
<span class="title">{{item.content}}</span>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
With an example in the plunker: https://plnkr.co/edit/mJJkVr?p=preview
dhilt commented
@lim0721lim Thanks for the issue, this is an interesting use case. The point is that
your App renders the template with the modal that is hidden initially. This
hidden modal contains ui-scroll. The ui-scroll plays with geometry and
visibility, this way he decides when and how many data should be retrieved
to fill out the viewport. That's why we see only 5 rows when the modal is
open; only 1 pack of datasource items had been requested. The viewport
invisibility prevents other requests.
As a simple but dirty workaround I can suggest to increase buffer size
value from 5 (default) to, say, 30: `buffer-size="30"`. In this case the
initial first request should be enough to fill out the viewport, and the
scrollbar should appear.
But the right solution is to render the ui-scroll only when the modal is
shown: `<li ui-scroll ng-if="isModalOpen" ...>`. It is not obvious how to
do it without any Angular specific Bootstrap wrapper. Would you like to try
https://angular-ui.github.io/bootstrap/#!#modal ? This is another Angular
UI product. Right now I have no live example but it should be pretty easy
to integrate them both within a single app. Please let me know if you have
any issues with it!