modal scroller

[Michael]

Is it possible to use: $("#modal_scroll").data("kendoMobileScroller").reset(); inside of a modal view?

I use similar commands throughout my app, but on the modal it has no effect. Modal is:

                <div data-role="modalview" data-before-show="logged_before()" data-model="Service.viewModel" id="details" style="width: 100%; height: 100%;">
                    <div data-role="header">
                         <div data-role="navbar" style="background: #333333;">
                             <span data-role="view-title" style="color: #eeeeee; padding: 0px;">Details</span>
                             <a data-align="left" data-role="button" onclick="$('#details').data('kendoMobileModalView').close();" style="margin-top: 10px; text-align: center; background: #ffffff; width: 60px; font-size: 12px; line-height: 12px; padding: 7px 6px 6px 6px; font-weight: bold; border-color: green;">Back</a>
                         </div>
                    </div>
                    <div class="view-content" data-role="scroller" id="modal_scroll">
                        <div id="detail_area"></div>
                    </div>
                </div>

[Kiril Nikolov]

Hello Michael,

I have reproduced this in a simple example, and it seems to be working as expected. Here is the example:

http://jsbin.com/hoyaf/1/edit

And a screencast:

http://www.screencast.com/t/sxFePNUcT

Regards,
Kiril Nikolov
Telerik

[Michael]

I'm not sure what to say about that. It doesn't work in our app.

If it matters, the content of the div is being populated by ajax calls, but erased every time new data is populated.

We do this same thing within several views on the app, but in the modal it fails to reset. There are no errors. It just.. doesn't do anything.

[Michael]

Perhaps this will help:

If I set: <div data-role="scroller" style="height: 300px;" id="modal_scroll">,
then the reset works.

If I use: <div data-role="scroller" style="height: 100%;" id="modal_scroll">,
then the reset does nothing.

Obviously, we desire to have the height at 100%..

[Michael]

Actually, percentage height doesn't work at all. If I set it to 1%, it still fills the screen.

[Kiril Nikolov]

Hi Michael,

The problem comes from the fact that in order to set percentage height of the scroller, it needs its parent element to have explicit height set. When you are using percentage height for the scroller it does not actually scroll. 

In order to achieve the functionality that you are looking for (using relative height for the scroller) the best approach will be to use CSS flexboxes. You can read more about it here:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Or you can also check this example project:

http://www.telerik.com/support/code-library/using-css-flexbox-to-format-content

Regards,
Kiril Nikolov
Telerik

[Michael]

Okay, thanks. I've decided to just drop the modal altogether and show/hide a div instead.