Kendo Mobile - Modal View not resizing to height of contents

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

I can repro in the simulator. I have roused @mtaylor from his jammys so hopefully he can stop by and comment. Here is a working Bin for you Mike. http://jsbin.com/amatad/1 — Burke Holland, Feb 06 '13 at 22:58
Awesome Burke, thanks a lot for coming to my aid again! I hope to hear of a viable solution soon. — TAS, Feb 06 '13 at 23:12

score 1 · Answer 1 · answered Feb 07 '13 at 06:03

1

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.

answered Feb 07 '13 at 06:03

Bundyo

2,195
13
13

I understand, and thank you for commenting @Bundyo. I suppose I was taking a shot in the dark with this, as I figured the height issue I am having may be something trivial to solve.. – TAS Feb 08 '13 at 10:14

score 1 · Accepted Answer · answered Feb 22 '13 at 20:30

1

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

answered Feb 22 '13 at 20:30

TAS

383
1
6
17

Great solution. I pasted this into app.js and it worked perfectly. – zkent Jul 23 '14 at 15:29

score 0 · Answer 3 · answered Oct 10 '15 at 17:35

0

Call this before invoking the modal 'open' call:

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

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

answered Oct 10 '15 at 17:35

Jandieg

88
8

Kendo Mobile - Modal View not resizing to height of contents

3 Answers3