modal scroller

7 posts, 0 answers
  1. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 11 Feb 2014 Link to this post

    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>
  2.
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 12 Feb 2014 Link to this post

    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!
  5. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 12 Feb 2014 in reply to Kiril Nikolov Link to this post

    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.
  7. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 12 Feb 2014 in reply to Michael Link to this post

    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%..
  8.
  9. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 12 Feb 2014 in reply to Michael Link to this post

    Actually, percentage height doesn't work at all. If I set it to 1%, it still fills the screen.
  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 13 Feb 2014 Link to this post

    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!
  13. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 13 Feb 2014 in reply to Kiril Nikolov Link to this post

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