This is a migrated thread and some comments may be shown as answers.

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

4 Answers 57 Views
Window
This is a migrated thread and some comments may be shown as answers.
Garry
Top achievements
Rank 2
Veteran
Garry asked on 07 Jun 2013, 10:24 AM
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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 11 Jun 2013, 06:39 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Garry
Top achievements
Rank 2
Veteran
answered on 12 Jun 2013, 03:11 PM
Thanks very much Dimo.
We tested this today and it works as expected.

Kind Regards, Garry.
0
Garry
Top achievements
Rank 2
Veteran
answered on 12 Jun 2013, 03:12 PM
Thanks Dimo
0
Tom
Top achievements
Rank 1
answered on 21 Jun 2013, 01:08 PM
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.
Tags
Window
Asked by
Garry
Top achievements
Rank 2
Veteran
Answers by
Dimo
Telerik team
Garry
Top achievements
Rank 2
Veteran
Tom
Top achievements
Rank 1
Share this question
or