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

Tabstrip window.innerHeight and km-active-state problem

6 Answers 51 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
domiSchenk
Top achievements
Rank 1
domiSchenk asked on 10 Feb 2014, 09:14 PM
My first problem is:
Sometime the window.innerHeight is just 548px and not 568px (iPhone 5 with statusbar plugin)
this leads to a padding/margin on the bottom of 20px.

my app start code looks this:
var options = {
    initial: 'Start-view',
    skin: 'ios7',
    statusBarStyle: 'black-translucent',
    init: function() {
        console.log(window.innerHeight);
        $(document.body).height(window.innerHeight);
    }
};
 
window.App.mobile = new kendo.mobile.Application(document.body, options);
                       
StatusBar.overlaysWebView(true);
navigator.splashscreen.hide();

normally on device it work but out of 10, 2,5 times it doesn't work.


my Second problem is: 
I have a tabstrip with 3 buttons, all works except the last one.
When I click it, it does not get the km-active-state class. instead the view before got the km-active-state class.
when i click the 2nd time on the last view it will select(activate) it.

i thought i found the bug/problem, i did a rollback till it worked. and then i change bit for bit till it did not work.
The culprit was Datasource I used one datasource a 2nd time in my app. (on view init i did var ds = new kendo.ui.DataSourceGift;)

So i change everything too init all Datasource at app start.

but now its starts again when i reload the app (location.reload();) [is for multilingual purpose]
its 50% that it works/not working.

Do you guys have an idea what the problem is?

its hard to post code because im using requirejs




6 Answers, 1 is accepted

Sort by
0
domiSchenk
Top achievements
Rank 1
answered on 12 Feb 2014, 08:36 PM
So I found out something but i cant find a solution to resolve this :-(

for my height problem im using this:

init: function() {
          if (window.innerHeight === 548 || window.innerHeight === 460) {
              console.log(window.innerHeight);
              window.innerHeight = window.innerHeight + 20;
          }
          $(document.body).height(window.innerHeight);
}


for my 2nd problem i found out after some reloads my view object looks like this:
01._back: false
02._events: Object
03._paramsHistory: Array[1]
04._size: Object
05.applicationNativeScrolling: false
06.container: Object[1]
07.content: Object[1]
08.defaultTransition: ""
09.element: Object[1]
10.footer: Object[1]
11.header: Object[1]
12.id: "/"
13.init: function (e) {
14.inited: true
15.layout: Object
16.loader: Object
17.model: null
18.options: Object
19.overlay: Object[1]
20.params: Object
21.scroller: Object
22.scrollerContent: Object[1]
23.show: function (e) {
24.title: "({Setting.title})"
25.transition: undefined
26.wrapper: Object[1]
27.__proto__: Object

the problem is that id is "/" but i dont know why
someone have an idea?


0
Kiril Nikolov
Telerik team
answered on 13 Feb 2014, 04:44 PM
Hi Dominik,

Kendo UI and the StatusBar plugin both offer a "fix" for the newly introduced behavior in iOS 7. For more information refer to the following articles:

With that said, we do not recommend mixing the fixes from both as this might yield in undesired results. Either use the statusbar plugin to fix the overlayed webview and apply styling to the statusbar or use the means provided by Kendo UI.

About your other Kendo UI problems - I will need to ask you if you get any JavaScript errors in the console when you debug your project? We will need a runnable sample to see what exactly goes wrong and what is causing it.

Regards,
Kiril Nikolov
Telerik
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
0
domiSchenk
Top achievements
Rank 1
answered on 13 Feb 2014, 10:50 PM
Thanks for your response Kiril.

for my first problem its working now just run StatusBar.overlaysWebView(true); before kendo ui initialization. (doesn't work in simulator).

for my 2nd problem at the moment i cant reproduce it in the simulator but on a device i can.
for a runable sample in an clone of the repo enough? (can you access my repos)?
0
domiSchenk
Top achievements
Rank 1
answered on 13 Feb 2014, 10:51 PM
ah forgot to say. no there is no error on the console :-(
0
Steve
Telerik team
answered on 14 Feb 2014, 02:52 PM
Hi Dominik,

It would be best if you can isolate this problem in a simplistic project, so we can quickly run it and verify the behavior you report. Once we do, we would be able to advise you accordingly. Please share the name of the project where you isolated the issue and we would gladly look into it.

Regards,
Steve
Telerik
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
0
domiSchenk
Top achievements
Rank 1
answered on 15 Feb 2014, 11:36 AM
well i tried to locate the problem, but could not really isolate it.

what i did now, is created a static tabstrip (prerendred)
<div data-role="footer" class="km-footer">
        <div  id="TabStrip" class="km-widget km-tabstrip">            <--- removed data-role so its not rendred 2 times
            <a href="#Tab1-view" class="km-button" data-role="tab"><span class="km-text" >Tab1</span></a>
            <a href="#Tab2-view"  class="km-button" data-role="tab"><span class="km-text" >Tab2</span></a>
            <a href="#Tab3-view"  class="km-button km-state-active" data-role="tab"><span class="km-icon"></span></a>
        </div>
    </div>

its not a good solution but for now better then nothing.

i will keep you up to date if i find the reason it didn't work like intended.
Tags
General Discussions
Asked by
domiSchenk
Top achievements
Rank 1
Answers by
domiSchenk
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Steve
Telerik team
Share this question
or