0

I am using scrollview in my jQuery Mobile application.But when I use it,the textfields cannot receive proper focus and as a result I am not able to type values into them.

This is my code:

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/" />  
<link rel="stylesheet"  href="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<style>
    .ui-content.ui-scrollview-clip {
        padding: 0;
    }
    .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
        margin: 0;
        padding: 15px;
    }
    .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
        margin: 0;
    }

</style>
    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js"></script>
    <script src="http://jquerymobile.com/test/experiments/scrollview/jquery.easing.1.3.js"></script>
    <script src="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js"></script>
    <script src="http://jquerymobile.com/test/experiments/scrollview/scrollview.js"></script>
    <script src="http://jquerymobile.com/test/docs/lists/docs/docs.js"></script>
</head> 
<body > 

<div data-role="page" class="page" id="home" >
    <div data-role="header">
        <h1>Sample</h1>
    </div><!-- /header -->

    <div data-role="content">

        <div  data-role="fieldcontain">
    <label for="tf">Name</label>
    <input type="text" name="tf" id="tf" />
</div>
<div  data-role="fieldcontain">
    <label for="ta">Address</label>
    <textarea name="ta" id="ta" rows="5" cols="10"></textarea>
</div

    </div><!-- /content -->

</div>
</body>

You can see a sample here - http://jsfiddle.net/uzJW4/

I got some information on this here - http://jquerymobile.com/test/experiments/scrollview/sv-test-02.html. But could not really figure out what to do to make it work in my case.

Any help in this matter will be greatly appreciated.

user700284
  • 13,540
  • 8
  • 40
  • 74
  • not sure if this is the related to the issue but I get a 404 for this page: http://jquerymobile.com/test/docs/lists/docs/docs.js – Phill Pafford Oct 19 '11 at 15:31
  • That js is anyway not needed.Even if it is not there the issue exists.Copy pasted the code from the scrollview demo app for illustrating the issue. :):) – user700284 Oct 19 '11 at 16:48

1 Answers1

0

While this question is about iScroll4, the solution should still be the same since both iScroll and jquery mobiles experimental scrollview use the same workaround for the scrolling.

Community
  • 1
  • 1
Naning
  • 734
  • 2
  • 8
  • 18