This is a migrated thread and some comments may be shown as answers.

modal scroller

6 Answers 104 Views
ModalView
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 11 Feb 2014, 11:11 PM
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>

6 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 12 Feb 2014, 08:25 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 12 Feb 2014, 11:06 PM
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.
0
Michael
Top achievements
Rank 1
answered on 12 Feb 2014, 11:19 PM
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%..
0
Michael
Top achievements
Rank 1
answered on 12 Feb 2014, 11:27 PM
Actually, percentage height doesn't work at all. If I set it to 1%, it still fills the screen.
0
Kiril Nikolov
Telerik team
answered on 13 Feb 2014, 12:09 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 13 Feb 2014, 04:00 PM
Okay, thanks. I've decided to just drop the modal altogether and show/hide a div instead.
Tags
ModalView
Asked by
Michael
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Michael
Top achievements
Rank 1
Share this question
or