Textarea issues on Android / JQueryMobile+PhoneGap

My textarea control somehow breaks away from the .css theme and shows me two boxes, one that is themed and one that is not.

This code works fine on the emulator but exhibits this behavior on my HTC Evo, screenshot here http://postimage.org/image/w7dxo53jf/

What am I doing wrong?

<meta charset="utf-8">
<title>Untitled Document</title>
<link href="./jquery-mobile/jquery.mobile-1.0.css" rel="stylesheet" type="text/css"/>
<script src="./jquery-mobile/jquery-1.6.4.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.0.js"></script>
<div data-role="page" id="page">
  <div data-role="header">
  <div data-role="content">Content
    <div data-role="fieldcontain">
  <label for="textarea">Textarea:</label>
  <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  <div data-role="footer">

I am new to JQuery and Phonegap, so I am sure there is something silly that I am missing. I have gone through JQuery and JQM docs, Googled and looked through various posts to no avail.

The HTML was created using Dreamweaver / CS5.5.



I fixed it for now using the data-role="none" attribute. However, I cannot tell if this is an environment issue on my project or if it is really a defect in JQueryMobile or Phonegap.

Here is how my code looks like now...

        <div data-role="none">
            <textarea id="textareaComments"></textarea>

Ref. JQM Docs: http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-all-native.html

Closing it for now. Thanks!

Maybe has nothing to do with it, but you forgot to import PhoneGap library in the <head> part.

<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>

Need Your Help

Update records only when ID matches

sql sql-server sql-server-2005 sql-update

How would I update data in a table in a separate database based on the records in the current database?