Dynamically Size Height of ModalView to Content

[Bruce]

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

[Bruce]

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?

[Kiril Nikolov]

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

[Bruce]

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?

[Kiril Nikolov]

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

[Jim Harkins]

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());

[Kiril Nikolov]

Hi Jim,

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

Regards,
Kiril Nikolov
Telerik

 

 

[Russ]

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);