csshtmlkendo-uimodal-view

Kendo Mobile - Modal View not resizing to height of contents

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

Solution

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