No scrolling on x-axis

[Andreas]

Hi!

Is there any way to completely prevent scrolling on the x-asis on iPhone 4-5?

I have tried overflow-x:hidden on various elements including body but it doesnt work. Several posts on blogs says it can be done. Is it something in the kendo style that prevents it?

We are animating content (jQuery's .animate) moving to the right and revealing a menu underneath, but then scroll bars appear. We tried display:none on the overflowing content but that totaly mess up kendo scroll view when navigating to the view again.

Thanks

[Petyo]

Hello Andreas,

In general, oveflow-x:hidden should prevent horizontal scrolling from appearing, and kendo styling should not affect that in any way. You may consider using the kendo.fx implementation and see if the problem persists.
 
Regards,
Petyo
the Telerik team

[Andreas]

Hi Petyo, thank you for your reply.

I'am really really trying to get a rather simple layout to work here, but struggle hard with a scroll problem.

Here is the mark up for the view

<div data-role="view" id="index" data-show="showIndex" data-hide="hideIndex">
<div class="mainContent" data-role="touch" data-enable-swipe="true" data-swipe="onSwipe">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-click="openSwipeMenu">=</a>
<span class="headerTitle">Start</span>
</div>
</header>
<div class="mainColumn">
<p>Hello world</p>
</div>
</div>

<div class="mainMenu">
<a href="#index" data-role="button">Page 1</a>
<a href="Page02.html" data-role="button">Page 2</a>
<a href="Page03.html" data-role="button">Page 3</a>
<a href="Page04.html" data-role="button">Page 4</a>
</div>
</div>


The div with the class mainContent is covering the whole width, and placed with z-index 2 above the div with class mainMenu. When swiping mainContent or data-click the a tag in navbar the mainContent animates 100px to the right, revealing the menu underneath.

CSS, all parents to mainContent have overflow-x:hidden!important;

JavaScript, I use jQuery .animate that is triggered when swiping mainContent or data-click the a tag.

When the app is first loaded in the ICENIUM simulator and ICENIUM ION (iPhone 4,5) there is no problem with scrolling. However as soon as the mainContent is animated to the right, I suddenly can drag around the whole view all over the place. But all there is around the view is white space! Overflow hidden is working in the way that it clips the content - but scrolling is still there.

In the CSS file I have set the width and height to 100% for mainContent and all its parents including body and HTML - else I dont get the background to cover the whole window, could that be the problem?

I want to solve this problem with my code as a base. Do you have any ideas? Do you need more information?

[Alexander Valchev]

Hello Andreas,

I am afraid that your question is related to custom implementation and as such is out of the scope of our standard support services. The standard support service - the ones included in the support package that goes with the controls, cover only the built-in functionality of the corresponding products.
Thank you in advance for the understanding.

Kind regards,
Alexander Valchev
the Telerik team