ionic-content overlaps/hide behind ion-header-bar/ion-nav-bar.


Recently I am working on Ionic Framework with AngularJS. I noticed that my <ion-content> was overlapping or hidden behind <ion-nav-bar> or in some cases you may have <ion-header-bar> as well..

       <ion-header-bar class="bar bar-header bar-dark">
      <h1 class="title">Settings</h1>
      <button class="button button-clear" ng-click="closeSettings()">Close</button>
    </ion-header-bar>
    <ion-content>
      <div class="padding">
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Units</span>

            <ion-radio-buttons ng-model="settings.tempUnits">
              <button class="button button-positive button-radio" ng-value="'f'">&deg;F</button>
              <button class="button button-positive button-radio" ng-value="'c'">&deg;C</button>
            </ion-radio-buttons>
          </label>
        </div>
      </div>
    </ion-content>

Solution: 

Assign a class=”has-header” to ion-content.

<ion-content class="has-header">
</ion-content>

Hope this helps –

Happy Android/ionic/angular Coding 🙂

ionic/angular: Use The Android And iOS Camera With Ionic Framework


Source:

https://blog.nraboy.com/2014/09/use-android-ios-camera-ionic-framework/

Most smart phones on the market have at least one camera if not two.  You may want to leverage these cameras to make the next Instagram or SnapChat type application.  Lucky for us, the native Android and iOS camera can be easily accessed using Ionic Framework and the AngularJS extension set, ngCordova.

Thanks for Nick Raboy for wonderful article.

Happy Hybrid App Development…

ionic/angular: Implement A Barcode Scanner Using Ionic Framework


Source:

https://blog.nraboy.com/2014/09/implement-barcode-scanner-using-ionic-framework/

More specifically I needed to scan quick response (QR) codes.  After doing some searching I found that ngCordova had an extension for the Apache Cordova plugin BarcodeScanner which has the ability to scan barcodes in the following formats:

  • QR Code
  • Data Matrix
  • UPC E
  • UPC A
  • EAN 8
  • EAN 13
  • Code 128
  • Code 39
  • ITF

Pretty much all the formats anyone would ever need.  The plugin itself makes use of the very popular ZXing library.

Thanks to Nick Raboy for wonderful article.

Happy Android Development 🙂

ionic/angular: Syncing Data With Dropbox Using Ionic Framework


Source:

https://blog.nraboy.com/2014/10/syncing-data-dropbox-using-ionicframework/

Storing or syncing data remotely is often a need in modern apps.  This generation is all about the cloud and how to be a part of it.  IonicFramework is a great way to make hybrid cross platform mobile Android and iOS applications, but how about sharing data between them?  Dropbox is one of a few cloud storage services that happens to have great APIs and documentation.

The following won’t necessarily show you the best way for syncing data in IonicFramework using Dropbox’s Datastore API, but it will show you how I did it with success.

Thanks to Nick Raboy.

Happy Android Hybrid App Development 🙂