Our website app is located at http://360vindemo.com. We are using KendoUI v2013.2.1024, and we are calling remote views.
If you browse to our website on some mobile devices (specifically a Nexus 7 or an iPad Mini), the first time you load the website (it auto-forwards mobile devices to http://360vindemo.com/Mobile), the Kendo Mobile Application starts up and loads everything, but the problem is that the browser evidently thinks the header takes up 0 height, so the View that gets rendered is underneath it. See the screenshot. After refreshing the page, it looks normal, and the header takes up the correct amount of height. So there seems to be some weird timing issue, that if something isn't loaded, the header takes up 0 height, and the View registers that it is supposed to be at the very top of the screen.
This bug only seems to happen after I have either closed the browser, reopened it, and browsed to our URL; or cleared the cache, then browsed to our URL. But if you hit the refresh button, it works every time.
We have tried giving the <header> tag an inline height, but the remote views still appear under the header. Any idea what is going on here? Let me know if you need any clarifying information.
If you browse to our website on some mobile devices (specifically a Nexus 7 or an iPad Mini), the first time you load the website (it auto-forwards mobile devices to http://360vindemo.com/Mobile), the Kendo Mobile Application starts up and loads everything, but the problem is that the browser evidently thinks the header takes up 0 height, so the View that gets rendered is underneath it. See the screenshot. After refreshing the page, it looks normal, and the header takes up the correct amount of height. So there seems to be some weird timing issue, that if something isn't loaded, the header takes up 0 height, and the View registers that it is supposed to be at the very top of the screen.
This bug only seems to happen after I have either closed the browser, reopened it, and browsed to our URL; or cleared the cache, then browsed to our URL. But if you hit the refresh button, it works every time.
We have tried giving the <header> tag an inline height, but the remote views still appear under the header. Any idea what is going on here? Let me know if you need any clarifying information.
3 Answers, 1 is accepted
0
JohnVS
Top achievements
Rank 1
Rank 1
answered on 06 Nov 2013, 11:32 PM
I just noticed by using the Development Tools in Chrome that it sometimes does this in desktop browsers as well. I was able to duplicate the problem regularly by attempting to browse to the URL http://360vindemo.com/Mobile#/Mobile . This seemed to be loading our Mobile app code twice or something. I noticed that our #MainDrawer div was being rendered twice, and our #HomeView remote view was also being rendered twice (while inspecting the page in the "Elements" tab of Chrome development tools). It appeared that when you type in the http://360vindemo.com/Mobile#/Mobile URL, it looks like Kendo is forwarding you to http://360vindemo.com/Mobile#/Mobile/Home/Home instead, which seems to be triggering another load of the same content. Does that help at all?
0
Hi John,
The issue which you described is not a known one.
I would like to remind you that debugging custom projects is out of the scope of our standard support services. Could you please send a simplified runable sample which isolates the issue?
This way we will be able to examine your exact configuration in details and advise you further.
On a side note, loading the content twice or initializing the mobile application twice is not supported. Please check your code for multiple initialization issues.
Regards,
Alexander Valchev
Telerik
The issue which you described is not a known one.
I would like to remind you that debugging custom projects is out of the scope of our standard support services. Could you please send a simplified runable sample which isolates the issue?
This way we will be able to examine your exact configuration in details and advise you further.
On a side note, loading the content twice or initializing the mobile application twice is not supported. Please check your code for multiple initialization issues.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
JohnVS
Top achievements
Rank 1
Rank 1
answered on 13 Nov 2013, 02:30 PM
We figured out the issue. I'll post our find, just in case anyone else has a similar issue.
We have a desktop to mobile forwarder. So if someone on a mobile device goes to our main website (360vindemo.com in our case), our system checks to see if it's a mobile device, and if so, it was forwarding to our mobile site at the URL that looked like this: "http://360vindemo.com/Mobile#/Mobile".
The problem appeared when the user went to that new mobile URL. ASP.NET, by default, when generating a URL by Url.Action() uses a less verbose path. So we were trying to forward to Url.Action("Index", new { controller = "Home", area = "Mobile" }) , and .NET would generate a path in the form of "/Mobile". But what we found is that when Kendo received that URL ("http://360vindemo.com/Mobile#/Mobile"), it would then try to forward to "http://360vindemo.com/Mobile#/Mobile/Home/Home", since that is the actual URL that Kendo needs I guess.
So in the end, we had to forward to our mobile version with the full "/Mobile/Home/Home" path, then we no longer had weird issues with duplicate loads of content or anything. Clear as mud.
We have a desktop to mobile forwarder. So if someone on a mobile device goes to our main website (360vindemo.com in our case), our system checks to see if it's a mobile device, and if so, it was forwarding to our mobile site at the URL that looked like this: "http://360vindemo.com/Mobile#/Mobile".
The problem appeared when the user went to that new mobile URL. ASP.NET, by default, when generating a URL by Url.Action() uses a less verbose path. So we were trying to forward to Url.Action("Index", new { controller = "Home", area = "Mobile" }) , and .NET would generate a path in the form of "/Mobile". But what we found is that when Kendo received that URL ("http://360vindemo.com/Mobile#/Mobile"), it would then try to forward to "http://360vindemo.com/Mobile#/Mobile/Home/Home", since that is the actual URL that Kendo needs I guess.
So in the end, we had to forward to our mobile version with the full "/Mobile/Home/Home" path, then we no longer had weird issues with duplicate loads of content or anything. Clear as mud.