Kendo Mobile - 模态视图未调整到内容的高度答案

【问题标题】：Kendo Mobile - Modal View not resizing to height of contentsKendo Mobile - 模态视图未调整到内容的高度
【发布时间】：2013-02-06 18:51:18
【问题描述】：

我正在使用 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 中看到的只是一条非常薄的模态视图。

我正在使用适用于 Android 2.3 的最新 Kendo UI Mobile、Jquery 和 Opera Mobile 浏览器。

谢谢

【问题讨论】：

我可以在模拟器中重现。我已经从他的果酱中唤醒了@mtaylor，所以希望他能停下来发表评论。这是一个给你的工作箱，迈克。 jsbin.com/amatad/1
真棒伯克，非常感谢你再次来帮助我！我希望尽快听到可行的解决方案。

标签： css html kendo-ui modal-view

【解决方案1】：

Kendo UI Mobile 不声称对 Opera Mobile 有任何支持 - 很多东西都会在那里被破坏。这有几个原因 - flexbox（现在在最新的 Opera 中支持）、无法移除点击轮廓以及糟糕的 CSS 转换/转换性能。

【讨论】：

我明白，并感谢您对@Bundyo 发表评论。我想我是在黑暗中拍摄，因为我认为我遇到的身高问题可能是微不足道的问题。

【解决方案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());
    });
});

【讨论】：

很好的解决方案。我将它粘贴到 app.js 中，效果很好。

【解决方案3】：

在调用 modal 'open' 调用之前调用它：

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

您还必须将 data-stretch="true" 设置为模态视图。

【讨论】：