Kendo Mobile - Modal View not resizing to height of contents

StackOverflow https://stackoverflow.com/questions/14736553

  •  07-03-2022
  •  | 
  •  

Question

I'm using Kendo Mobile and am testing a modal view out. My goal is to have the height of the modal view auto resize to the contents within it.

Here is what I currently have:

<div id="mPopover" data-role="modalview" style="width: 95%; height: auto;">
    <div data-role="content">
        <ul data-role="listview">
            <li>...</li>
            .
            .
            .
        </ul>
    </div>
</div>

This works as expected on all the mobile browsers I've tested (Android 2.3 stock browser, Firefox, Dolphin)... except Opera Mobile. I know Opera isn't claimed to be fully supported, but does anyone have a clue as to why the inline height value isn't being respected the same in Opera Mobile? All I see with Opera Mobile is a very thin strip of a modal view.

I am using the latest Kendo UI Mobile, Jquery, and Opera Mobile browser for Android 2.3.

Thank you

Was it helpful?

Solution 2

Figured out a solid workaround that correctly sizes all modal views using JQuery:

$(window).bind("load", function () {        
    // kendo rendering fix for windows phone 8 and opera mobile
    // correctly sizes all modal views
    $("[data-role=\"modalview\"]").each(function() {
        $(this).height($(this).height());
    });
});

OTHER TIPS

Kendo UI Mobile doesn't claim any support of Opera Mobile - many things will be broken there. There are several reasons for this - flexbox (now supported in the latest Opera), the inability to remove the tap outline and the horrible CSS transitions/transforms performance.

Call this before invoking the modal 'open' call:

$(".km-modalview-wrapper").height('auto');

Also you must set data-stretch="true" to the modalview.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top