I am writing my first ionic app and it is a pleasure to work with!
I have a small CSS issue - my controls are rendering differently on Android than iOS. Screenshots are easier to explain - I have included device screenshots from my Android, iPhone and iPad.
In the top screenshot (Android) - the “Locate” icon on the top right is mixed up with the “Find” button. On the other platforms the CSS is fine.
and here is the ionic HTML code:
<ion-view title="Poker Games"> <ion-content class="has-header"> <div class="item-input-inset"> <form ng-submit="codeAddress(searchLocation.searchTerm)"> <label class="item-input-wrapper"> <i class="icon ion-ios7-search placeholder-icon"></i> <input type="search" placeholder="Address" ng-model="searchLocation.searchTerm"> <button type="submit" id="submit" class="button button-clear button-assertive">Find</button> </label> </form> <button ng-click="findMyLocation()" class="button button-clear button-assertive"> <i class="icon ion-ios7-navigate-outline"></i> </button> </div> ... left out </ion-content> </ion-view>
I have no custom CSS and it does this on the Ionic .12 and .13 beta.
On the Simulator it looks fine - it is only when I deploy to my Samgsung S4.
Any ideas on how to fix this?