title: android phonegap design issues
body: <p>My App is  android phonegap application using html page and css.
  But My Application design is varied in different emulator.
  I need to get the same UI Design for all mobile devices.</p>
  
  <p><strong>Note</strong></p>
  
  <p><strong>I didnt used jquery mobile</strong> </p>
  
  <p>Here my code</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;meta name="viewport" content="width=320; user-scalable=no" /&gt;
          &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;PhoneGap&lt;/title&gt;
          &lt;script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;link rel="stylesheet" href="../js/master.css" type="text/css" media="screen" title="no title" charset="utf-8"&gt;
          &lt;script type="text/javascript"&gt;
          &lt;/script&gt;
          &lt;style type="text/css"&gt;
          label.custom-select 
          {
          position: relative;
          }
          .custom-select select 
          {
              display: inline-block;
              border: 2px solid #03498A;
              padding: 2px 3px 3px 50px;
              margin: 0;
              outline:none; /* remove focus ring from Webkit */
              line-height: 1.2;
              background: #03498A;
              color: #FFFFFF;
              font-size:15pt;font:bold;
              width:80%;
              height:7%;
              -webkit-appearance:none; /* remove the strong OSX influence from Webkit */
              -webkit-border-radius: 6px;
              -moz-border-radius: 6px;
              border-radius: 2px;
          }
  
          /* for Webkit's CSS-only solution */
          @media screen and (-webkit-min-device-pixel-ratio:0) 
          {
              .custom-select select 
              {
                  padding-right:30px;    
              }
          }
  
          /* Since we removed the default focus styles, we have to add our own */
          .custom-select select:focus 
          {
              -webkit-box-shadow: 0 0 3px 1px #c00;
              -moz-box-shadow: 0 0 3px 1px #c00;
              box-shadow: 0 0 3px 1px #c00;
          }
  
          /* Select arrow styling */
          .custom-select:after 
          {
              content: "â–¼";
              position: absolute;
              top: 2%;
              right: 0;
              bottom: 0;
              font-size: 60%;
              line-height: 30px;
              padding: 0 7px;
              background-image: url(../images/dd.PNG);
              background-repeat:no-repeat;
              padding-left:80%;
              color: #03498A;
              pointer-events:none;
              -webkit-border-radius: 0 6px 6px 0;
              -moz-border-radius: 0 6px 6px 0;
              border-radius: 0 6px 6px 0;
          }
  
          .no-pointer-events .custom-select:after 
          {
              content: none;
          }
          .dropdown
          {
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
              background-color: #03498A;
              border: 1px solid;
              color: #FFFFFF;
              width:260px;font-size:20pt;font:bold;
          }
          #setting
          {
              margin-left:10%;
              margin_right:5%;
          }
          #checknotify
          {
              margin-left:50%;
          }
          #checkphone
          {
              margin-left:38%;
          }
          #checklocation
          {
              margin-left:51%;
          }
          #allcauses
          {
              margin-left:2%;
          }
          #link
          {
              margin-left:20%;
          }
          #managelabel
          {
              margin-left:6%;
          }
  
          .checkBox
          {
              background-position: 0px 0px;
          }
          .checkBoxClear
          {
              background-position: -32px 0px;
          }
          .checkBox, .checkBoxClear
          {
              background-image: url('../images/Check.png');
              background-repeat: no-repeat;
              display: inline-block;
              float: left;
              width: 32px;
              height: 32px;
              padding: 0px;
              margin: 0px;
              cursor: hand;
          }
          .checkBox1
          {
              background-position: 0px 0px;
          }
          .checkBoxClear1
          {
              background-position: -32px 0px;
          }
          .checkBox1, .checkBoxClear1
          {
              background-image: url('../images/Check.png');
              background-repeat: no-repeat;
              display: inline-block;
              float: left;
              width: 32px;
              height: 32px;
              padding: 0px;
              margin: 0px;
              cursor: hand;
          }
          .checkBox2
          {
              background-position: 0px 0px;
          }
          .checkBoxClear2
          {
              background-position: -32px 0px;
          }
  
          .checkBox2, .checkBoxClear2
          {
              background-image: url('../images/Check.png');
              background-repeat: no-repeat;
              display: inline-block;
              float: left;
              width: 32px;
              height: 32px;
              padding: 0px;
              margin: 0px;
              cursor: hand;
          }
              .checkBox3
          {
              background-position: 0px 0px;
          }
          .checkBoxClear3
          {
              background-position: -32px 0px;
          }
  
          .checkBox3, .checkBoxClear3
          {
              background-image: url('../images/Check.png');
              background-repeat: no-repeat;
              display: inline-block;
              float: left;
              width: 32px;
              height: 32px;
              padding: 0px;
              margin: 0px;
              cursor: hand;
          }
          &lt;/style&gt;
        &lt;/head&gt;
        &lt;body &gt;
          &lt;div&gt;
              &lt;div&gt;&lt;input type="image" style="width:100%" src="../images/set.png" /&gt;
              &lt;/div&gt;
              &lt;div align="center" style="margin-top:2%"&gt;&lt;input type="image" src="../images/load.png" style="width:90%" /&gt;
                  &lt;input type="image" src="../images/image.png" style="width:90%"/&gt;
                  &lt;div style="margin-top:5%"&gt;
                      &lt;label id="managelabel" style="width:70%;font-size:12pt"&gt;Manage Cause Settings&lt;/label&gt;
                      &lt;a id="link" href="javascript:help()"&gt;Help ?&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="loadingScreen" align="center"&gt;&lt;/div&gt;
              &lt;div align="center" style="margin-top:5%"&gt;&lt;label class="custom-select"&gt;&lt;select name="mydropdown" style="width:90%;height:10%;font-size:15pt" &gt;
                  &lt;option id="0" value="opt"&gt;option&lt;/option&gt;
                  &lt;/select&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div style="margin-top:3%;padding:5%"&gt;
                  &lt;table&gt;
                      &lt;tr width="100%"&gt;
                          &lt;td width="90%"&gt;&lt;label&gt;One&lt;/label&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;div id="Div1" class="checkBox"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
                          &lt;label for="Div1"&gt;&lt;/label&gt;
                          &lt;td&gt;&lt;input value='' type='checkbox' style="display:none"  /&gt;&lt;/td&gt;
                      &lt;/tr&gt; 
                      &lt;tr width="100%"&gt;
                          &lt;td &gt;&lt;label&gt;Two&lt;/label&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;div id="Div2" class="checkBox1"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
                          &lt;label for="Div2"&gt;&lt;/label&gt;
                          &lt;td&gt;&lt;input value='' type='checkbox' style="display:none" /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr width="100%"&gt;
                          &lt;td &gt;&lt;label&gt;Three&lt;/label&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;div id="Div3" class="checkBox2"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
                          &lt;label for="Div3"&gt;&lt;/label&gt;
                          &lt;td&gt;&lt;input value='' type='checkbox' style="display:none" /&gt;&lt;/td&gt;
                      &lt;/tr&gt; 
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;br/&gt;
              &lt;div&gt;
                  &lt;table&gt;
                      &lt;tr width="100%"&gt;
                          &lt;td&gt;&lt;div id="Div4" class="checkBox3"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
                          &lt;label for="Div4"&gt;&lt;/label&gt;
                          &lt;td&gt;&lt;label style="width:60%;font-size:12pt"&gt;Here settings&lt;/label&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input value='' type='checkbox' style="display:none" id='chkAllCauses'/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div style="margin-top:32%"&gt;
              &lt;div style="border-width:3px;padding-top:2%;padding-bottom:2%;padding-right:0px;padding-left:0px;background-color:#00458D;bottom:0;" align="center"&gt;
                  &lt;table width=100%&gt;
                  &lt;input type="image" src="../images/first.PNG" style="width:23%" /&gt;
                  &lt;input type="image" src="../images/second.jpg" style="width:23%" /&gt;
                  &lt;input type="image" src="../images/third.jpg" style="width:23%" /&gt;
                  &lt;input type="image" src="../images/fourth.png" style="width:23%"/&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>I have attached the two screenshots ,I have run in different two emulator now you can simply analyze the problem.</p>
  
  <p>![Image from Galaxy Tab][1]</p>
  
  <hr>
  
  <p>Image from settingFromAndroid2.2 the bottom design is disappeared,when I scroll down then only I can view this.</p>
  
  <p>![Android2.2][2]</p>
  
  <hr>
  
  <p><strong>To Clear these problem am trying with footer</strong> </p>
  
  <p>Suppose i have text box in my design,</p>
  
  <pre><code>&lt;input type="text"  style="width: 80%;height: 35px;font-size:15pt;border:4px solid orange" placeholder="Email Address (User ID)" /&gt;
  </code></pre>
  
  <p>I cannot able to type the text in text box,my design is collapsed while typing,here i have attached screenshot and html file .Kindly view this.
  ![with footer][3]</p>
  
  <p>How to solve my problem?</p>
  
  <p><strong>UpDate</strong>
  In my above code i added this line only for footer</p>
  
  <pre><code>    &lt;input type="text"  style="width: 80%;height: 35px;font-size:15pt;border:4px solid orange" placeholder="Email Address (User ID)" /&gt;
        &lt;div data-role="footer" class="ui-bar"  style="height:2px;bottom:0%;padding-bottom:0%;"&gt;
  
      &lt;table width=100%&gt;
              &lt;input type="image" src="../images/Home.PNG" style="width:23%" onClick="home()"/&gt;
              &lt;input type="image" src="../images/messages-menu.jpg" style="width:23%" onClick="inbox()"/&gt;
              &lt;input type="image" src="../images/settings-menu.jpg" style="width:23%" onClick="settings()"/&gt;
              &lt;input type="image" src="../images/close-menu.png" style="width:23%" onClick="callServiceFunction()"/&gt;
              &lt;/table&gt;
      &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>