9

I wrote a small calculator app for some formulas using cordova and onsenui.This app works fine on android and iphone but when I am using it on an ipad, the blinking cursor keep popping up above the text field, just like in the image I have posted, the cursor should be in yellow Litres textfield but it pops above it. Here is the code for the viewform

<table border="0" cellpadding="0">
    <tr style="height: 28px;">
        <td style="padding-right: 8px;">Litres:</td>
        <td align="center" style="background-color: #92D050; color: #000000;"><b>{{litres | setDecimal:3}}</b></td>
        <td><b>&nbsp;Required</b></td>
    </tr>
    <tr>
        <td style="padding-right: 8px;">Bag Size:</td>
        <td><ons-text-input ng-model="bagsize" placeholder="0" ng-change="doCalc()" type="number" pattern="[0-9]*" inputmode="numeric" min="0" style="width: 80px; background-color: #FFFF00; color: #000000"></ons-text-input></td>
        <td><b>&nbsp;Litres</b></td>
    </tr>
    <tr style="height: 28px;">
        <td style="padding-right: 8px;">No of Bags Required:</td>
        <td align="center" style="background-color: #92D050; color: #000000;"><b>{{totalbags | setDecimal:3}}</b></td>
        <td><b>&nbsp;</b></td>
    </tr>
</table>

enter image description here

Can someone tell me why it only happens with ipad, and how can I solve this issue?

Alexei - check Codidact
  • 22,016
  • 16
  • 145
  • 164
Junaid Noor
  • 474
  • 9
  • 24
  • 2
    Would you mind to integrate this component in jsfiddle? – Ivan Sep 18 '15 at 15:52
  • 1
    Try [this](http://www.abeautifulsite.net/hide-the-mouse-cursor-with-css/) --- `#selector {cursor: none;}` –  Oct 27 '15 at 00:34

0 Answers0