剑道移动-模式视图没有调整到内容的高度

Question

我正在使用Kendo Mobile，并正在测试一个模态视图。我的目标是让模式视图的高度自动调整到其中的内容

这是我目前拥有的：

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

这在我测试过的所有移动浏览器上都能正常工作（Android 2.3股票浏览器、Firefox、Dolphin）。。。除了Opera Mobile。我知道Opera并没有被完全支持，但有人知道为什么在Opera Mobile中内联高度值没有得到同样的尊重吗？我在Opera Mobile上看到的只是一个非常薄的模态视图。

我使用的是最新的Kendo UI Mobile、Jquery和Opera Mobile Android 2.3浏览器。

感谢

Answer 1

Kendo UI Mobile没有声称对Opera Mobile有任何支持——很多东西都会在那里被破坏。造成这种情况的原因有几个——flexbox（现在在最新的Opera中支持）、无法删除抽头轮廓以及糟糕的CSS转换/转换性能。

Answer 2

找到了一个可靠的解决方案，可以使用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());
    });
});

Answer 3

在调用模式"打开"调用之前调用此函数：

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

此外，您必须将datastretch="true"设置为模式视图。