Dynamically Size Height of ModalView to Content

8 posts, 0 answers
  1. Bruce
    Bruce avatar
    6 posts
    Member since:
    Jul 2012

    Posted 03 Sep 2013 Link to this post

    I want to create a message dialog with a message, optional title and an OK button at the bottom that will dynamically size to the height of the message content given an expressly set height.  Is there a way to do this?

    Best,

    BX
  2. Bruce
    Bruce avatar
    6 posts
    Member since:
    Jul 2012

    Posted 03 Sep 2013 Link to this post

    I have experimented a bit and found that initially the modalview does grow to the height of its content if you don't specify a height.

    However, if you subsequently show the same modalview with different content it doesn't resize its height.

    Ideas?
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 04 Sep 2013 Link to this post

    Hi Bruce,

    Unfortunately this functionality is not currently supported in Kendo UI Mobile. If you think that something like this should be added, please go to our feedback forums and submit it there, so it can be taken into consideration for a future release.

    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. Bruce
    Bruce avatar
    6 posts
    Member since:
    Jul 2012

    Posted 05 Sep 2013 Link to this post

    Kiril,

    Got it.  Perhaps I'm doing something wrong then.

    I want to have a message dialog that pops up whenever I need to tell the user something like, "Server is busy right now.  Please try back again later."

    I was trying to build a single modalview that I could reuse, passing in a different string to show.

    Is there a built-in way to show a message that I'm unaware of?
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 06 Sep 2013 Link to this post

    Hello Bruce,

    Have you considered using a simple alert to show the "Server busy message". It seems that this is exactly what will do the job in your case (and this is what iOS does itself in fact). Please try that and let me know if helps?
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Jim Harkins
    Jim Harkins avatar
    1 posts
    Member since:
    Oct 2009

    Posted 09 Aug 2014 in reply to Kiril Nikolov Link to this post

    I accomplished dynamic resizing of the same Mobile Modal Dialog doing the following.  It's kind of dirty but it works...

    var confirmDialog = $("#modalConfirm");
    confirmDialog.data("kendoMobileModalView").open();
    confirmDialog.height(confirmDialog.find('div:first > .km-scroll-container').height());
    confirmDialog.parent().parent().height(confirmDialog.find('div:first > .km-scroll-container').height());
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 12 Aug 2014 Link to this post

    Hi Jim,

    Thanks for sharing your solution with us, I am sure it will help other customers as well.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Russ
    Russ avatar
    49 posts
    Member since:
    Sep 2006

    Posted 06 Feb 2015 in reply to Kiril Nikolov Link to this post

    Because of the margin on some of the child elements of .km-scroll-container and height of the header, your solution did not exactly work for me. However, I wrote one that does (and I believe it is a little more robust):

    var modal = $("modalConfirm");
    //Get header height.
    var height = modal.find('div.km-header').outerHeight(true);
    //Get all direct descendants of the km-scroll-container that are visible and add their heights.
    $.each(modal.find('div.km-scroll-container > *'), function (index, elem) {
        var jqElem = $(elem);
        if (jqElem.is(":visible")) {
            height += jqElem.outerHeight(true);
        }
    });
    //Dynamically resize the dialog's height.
    modal.height(height);
    modal.parent().parent().height(height);
Back to Top
Kendo UI is VS 2017 Ready