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

ios7 Grid styles in mobile apps

7 Answers 17 Views
Grid
This is a migrated thread and some comments may be shown as answers.
axel
Top achievements
Rank 1
axel asked on 13 Nov 2013, 10:31 AM
Hi,

since ios7, all grid styles seem to be incorrect in mobile applications

kendoui.complete.2013.2.918.commercial
same with version 926

    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.black.min.css" rel="stylesheet" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>

kind regards

7 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 15 Nov 2013, 09:56 AM
Hello Axel,

This is a known issue, however it is already addressed - please upgrade your application to the latest internal build and let me know if you still observe any problems.
 

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
axel
Top achievements
Rank 1
answered on 15 Nov 2013, 10:32 PM
Hello Iliana,

internal build 2013.2.1104 doesn't fix it.

Regards
Axel
0
Iliana Nikolova
Telerik team
answered on 18 Nov 2013, 03:56 PM
Hi Axel,

I tested Kendo UI Grid in a mobile application using Q3 2013 Beta (v2013.3.1030) release and everything is rendered as expected. Please test your application using the aforementioned version and let me know if this helps.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
axel
Top achievements
Rank 1
answered on 20 Nov 2013, 07:00 PM
Hi Iliana,

chrome renders as expected (chrome.jpg).
the rendering on ipad safari is still incorrect (ipad.png)

by the way. making the grid height 100% and auto resizable with follwing code

$(window).resize(function() {
        var gridElement = $("#grid"),
        newHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
        otherElements.each(function(){
                otherElementsHeight += $(this).outerHeight();
        });
        gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});

also only works with chrome (ipad_autoheight.png)

thanks 
axel

0
Iliana Nikolova
Telerik team
answered on 22 Nov 2013, 11:58 AM
Hi Axel,

First of all I would like to apologize for the overlook - I double checked and was able to observe the issue. I forwarded it to the developers and the fix will be included in our next internal build. Once again I apologies for the inconvenience caused.

Regards,  
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
axel
Top achievements
Rank 1
answered on 26 Nov 2013, 01:14 PM
Hi Iliana,
thank you for your reply.

is there a quick fix to make the grid 100% height and auto resizable?

two more annotations:
1)  thouch scrolling is unsupported in chrome (safari works fine)
2) when grid is wider than screen diagonal scrolling becomes a torment on ipad. 

Kind regards
axel




0
Iliana Nikolova
Telerik team
answered on 28 Nov 2013, 02:47 PM
Hi Axel,

Apologies for not getting back you earlier. 

In order to make the Grid with height 100% and auto resizable on a mobile device I recommend the following:
  • Using the new adaptive Grid;
  • Set data-stretch="true" to  the view:
    <div data-role="view" data-init="initGrid" id="highGrid" data-stretch="true">
        <div id="grid"></div>
    </div>
     
    <script>
    function initGrid() {
      //grid configuration 
    }
    </script>
  • Apply the following CSS rule:
#highGrid .km-content > .km-scroll-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

Regarding the two more annotations:
  1. I tested Kendo UI demos in Google Chrome browser on iPhone and scrolling is working as expected;
  2. I wasn't able to reproduce this issue too. 
Could you please elaborate a bit more on the aforementioned issues or provide an example which demonstrates them? Thank you in advance for your time and cooperation.  

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
axel
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
axel
Top achievements
Rank 1
Share this question
or