Scroll and Button Disable issue

[akshay]

I am facing two issues with respect to scroll and button disable. Kendo UI Mobile version used is kendoui.mobile.[phone].commercial
I have attached the sample project which has the issue. 
Please find below the issue details 

Issue 1 - This issue is occurring in iOS 6 Safari browser.
I am trying to add a scroll to the screen so that user is able to enter the values to textbox fields in both Portrait and landscape mode.
Fields are moving outside the screen when trying to scroll.
Steps to reproduce the issue:
1. Try to scroll the screen by selecting the space next to Unit button.
2. Entire screen gets scrolled and fields moves outside the screen.

Issue 2 - This issue is occurring in iOS 6 Safari browser
I am trying to disable the button dynamically using jQuery but the button is not getting disabled and i am able to click the button.
Steps to reproduce the issue:
1. Click on "Unit" button next to Unit label
2. Alert appears

Any help provided is appreciated.

[Alexander Valchev]

Hi akshay,

Thank you for contacting us. Straight to your questions:

1. I believe that the issue occurs due to the fact that you are modifying the height and display CSS values of the scrollable container. I removed the setHeightForContainer function as well as the custom CSS styles and got everything to work as expected.
   
   On a side note, the View will automatically initialize scroller if the content is taller than the height of the content container.
   
   
2. To achieve that I suggest you to simply unbind the event. In this way the click handler will not execute.
   

   function onTaskDetailLoad() {
       $("#idUOM").data("kendoMobileButton").unbind("click");
   }

   
   If you want to enable it at later stage, simply use the bind method.
   

   $("#idUOM").data("kendoMobileButton").bind("click", onUOMButtonClick);

For your convenience I updated and attached the sample. Please let me know if you have any further questions.

Regards,
Alexander Valchev
Telerik

[akshay]

Thanks Alexander for the response.
The second issue is solved.

For the first one height is reset when 
1. Device is changed from Landscape to portrait or  viceversa 
2. When resize the desktop browser height.

I have changed the css to $("#idMaterialDetailScroller").css('display', 'block'); now the scrolling is fine but when typed in text box entire screen is getting hidden

To reproduce the issue please follow the below steps :
1. Click on Textbox next to Quantity field
2. Enter characters. Entire screen is getting hidden

PFA the sample project.

[Alexander Valchev]

Hi Akshay,

As I explained in my previous reply, the issues you experience occur due to the custom resizing logic and CSS styles that you use in your application.

When I remove the:

• app/styles/clsTaskDetail.css
• app/viewModel/TaskDetailViewModel.js

files and left only KendoUI/jQuery the issues does not occur any more.

Kendo UI handles screen rotation and will display scroller if the content is taller than the screen. The user is able to access and fill in all fields of the form.

Also it is not supported to create two headers for one View, if your aim is to have two NavBars, please put them in one header.

For your convenience I attached back the modified project.

Regards,
Alexander Valchev
Telerik