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>
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
0
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
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
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.
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
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%..
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
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
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
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
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.