iPad/Android 100% HEIGHT inside WINDOW different to PC Browser

[Garry]

We have created a very simply HTML file to demonstrate a problem with the KendoUI Window affecting iPad and Android browsers only.
When run on PC Browsers such as Firefox, Chrome, Safari and IE10, the sample will automatically resize the internal table to fit inside the popup window.
On iPad and Android devices however this (Style="Height:100%") does not work as the sampe demonstrates in as few lines as possible.
Could you kindly please recommend a fix for this?

Regards, Garry.

[Dimo]

Hi Garry,

Please add the following CSS rule to your page:

.k-window-content > .km-scroll-container
{
  height:100%;
}

The problem is caused by an additional <div class="km=scroll-container"> element, which is inserted between div.k-window-content and your table. This <div> ensures touch device scroll capabilities, but breaks the sequence of elements with an explicit height, so the table's percentage height is ignored.

Indeed, it would be nice if the additional <div> can check the height styles applied to its parent and child and assume a correct height accordingly, however, this is not possible in all cases (e.g. when using external CSS styles). What we will do is to add the above CSS rule in our base (common) stylesheet to support this particular case.


Regards,
Dimo
Telerik

[Garry]

Thanks very much Dimo.
We tested this today and it works as expected.

Kind Regards, Garry.

[Garry]

Thanks Dimo

[Tom]

Hi,
Didn't totally work for me

I  had to add:
 
.km-scroll-container
{
  height: 100%;
  position: absolute;
  width:100%;
}

It would be nice if there were a setting on the view to set no scrolling.