Scroll Container Height

6 posts, 0 answers
  1. Marcin
    Marcin avatar
    187 posts
    Member since:
    Jan 2011

    Posted 23 Jul 2013 Link to this post

    Hello
    I'm using kendo grid on my mobile application. But I have 2 issues with it:
    a) I would like to use internal grid scroll (this requires set heigh for grid and working when I set absolute value like 200px;) But I want to fill grid (max height to the size of scroll container. I can fill it with width without problem, however height is not working for me.

    b) I have problem with flat theme on Windows Phone. There is something wrong with sizing. the settings of font size/ column sizes in grid (js, during creation) are different than on other devices. If everything looks good on iphone or android it is too large on windows phone. And all columns width, header sizes are not fitting properly. I have to use column sizes to use scrolling. There is also issue with group display on grid (on wp it shows ... where should be empty)

    Regards
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 25 Jul 2013 Link to this post

    Hi Marcin,

    a) I'm not sure what are you trying to achieve. If you want to make the Grid 100% and use its scroller, instead of the one on the View, you can use the data-stretch option and then make the Grid 100% high (as the scrolling container doesn't have height on itself). If you had in mind something else, I will need a sample page with the issue isolated.

    b) This may be due to the missing devicePixelRatio in Windows Phone which is needed to resize the app to the different device resolutions and sizes. To simulate this, we use a root font-size and since all our Widget styling is based on em units, they are resized accordingly. This may prove a problem for the Grid which is not really meant to fit in a mobile app. Can you share a sample page, reproducing this problem and I will see what I can do to help you fix it? Thank you in advance.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Marcin
    Marcin avatar
    187 posts
    Member since:
    Jan 2011

    Posted 30 Jul 2013 Link to this post

    Hello,
    I've created a sample project with grid where columns width are set. The widths are properly displayed on iphone or desktop browser but not on windows phone. The columns are too narrow, even grouped ones.
  4. Dimo
    Admin
    Dimo avatar
    8450 posts

    Posted 02 Aug 2013 Link to this post

    Hello Marcin,

    We have fixed the problem with IE10 showing ellipsis even in empty cells. You can use the same approach by adding:

    .k-grouping-row  .k-group-cell
    {
        text-overflow: none;
    }

    As for the column widths, the observed behavior is browser-related. If you add a 140px (or 100px) wide <div> above the Grid, you will see that the defined column widths are actually obeyed. It looks like the different devices size elements differently. This might be related to pixel density or other system quirks.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Marcin
    Marcin avatar
    187 posts
    Member since:
    Jan 2011

    Posted 02 Aug 2013 Link to this post

    Hello,
    thank you for explanation, so the only solution now, is to have different widths based on device. Is it possible to use css to set column widths and get the same scroll behaviour? Then I would use different css based on device and that would workaround my problem somehow.

    Kind Regards
    Marcin
  6. Dimo
    Admin
    Dimo avatar
    8450 posts

    Posted 02 Aug 2013 Link to this post

    Hello Marcin,

    Grid column widths cannot be controlled via external CSS. You can use client-side browser detection and define different widths during initialization.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top