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

5 posts, 1 answers
  1. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 07 Jun 2013 Link to this post

    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.
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Jun 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 12 Jun 2013 Link to this post

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

    Kind Regards, Garry.
  5. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 12 Jun 2013 Link to this post

    Thanks Dimo
  6. Tom
    Tom avatar
    1 posts
    Member since:
    Mar 2011

    Posted 21 Jun 2013 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready