Same look for IOS and Android - how

[Lito]

I used the example app in "How-To: Build Apps With Kendo UI Mobile" as "shell" for a simple multi-views app intended for IOS and Android. The Android look is quite different from the IOS - black background, tabstrip on top rather than at the bottom, etc.

1. What do I have to do so that the look is the same for both? That is, I want both to look like that for IOS - white background, tabstrip at the bottom.
2. Also, I noticed that the footer tab labels do not show on the Android.This appears to be a bug.
3. 4 of my 5 views are mainly custom tables in HTML. If I click a particular table view and then go to another table view, the latter view is changed in size. ASN  The view which causes the other table views to change in size is "enter_score". The other table views do not affect the other views. I have attached the code.

Your help would be greatly appreciated.
 

[Alexander Valchev]

Hello M L,

In answer to your questions:

1. What do I have to do so that the look is the same for both? That is, I want both to look like that for IOS - white background, tabstrip at the bottom.
   
   To achieve that you have to force iOS look on all platform. This help topic shows how this could be done.
   
   
2. Also, I noticed that the footer tab labels do not show on the Android.This appears to be a bug.
   
   This is by desing - you can observe the behaviour in this on-line demo (use the OS simulator mode located at the right to switch between iOS and Android platform). Current implementation aims to match the native Android appearance as close as possible.
   
   
3. If I click a particular table view and then go to another table view, the latter view is changed in size. The view which causes the other table views to change in size is "enter_score".
   
   This View contains custom CSS rule which modifies the body style. Please remove the following:
   

   body {
       font-family:Arial;
       font-weight:bold;
       font-size:18px;
       margin:0;
       padding:0;
       width:90%;
       border:solid 1px;
   }

In addition, I noticed that you are using the document.ready ready event which is not recommended. Please put the logic in the respective View event handlers - init or show. Also do not include JavaScript elements inside the View's mark-up.

I hope this will help.

Regards,
Alexander Valchev
the Telerik team