Replace default look of SELECT box or dropdownlist on mobile webview

I am using onsen-ui HTML5 UI framework to create my webview mobile app.

With the help of:

  <ons-list-item modifier="tappable">
  </ons-list-item>

On onsen-ui, it does not help inherit existing design into the select box.
An example below.

Default design of the select box on iOS

In this case,
we'll have to write a custom CSS class for the select box to replace the default design.

  .custom-select-box {
    color: inherit;
    font: inherit;
    line-height: initial;
    direction: rtl;
    overflow: hidden;
    height: 40px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    option {
      direction: initial;
    }
  }

the main part which replace the default view is:

directional: inherit;
appearance: none;
border: none;

Final result

URL Scheme for Android in Cordova

My project's spec:
- Onsen UI
- Cordova

Simply following the step in Custom URL scheme PhoneGap Plugin would get your android or ios app ready with custom URL scheme.

But testing it the wrong way cause my hours to figure what is wrong with my configuration.

So, in the end, I found out testing URL scheme in android is different with how we test in ios.

In ios device,  ipod as example,
we just simply use browser with "myapp://" would do all job.

Which it is different in android,
so you'll have to utilise easyhyperlinks.com to initiate the scheme correctly,
because in android, it automatically prefix url with "http://" in browsers.

You can refer to this Using Custom URL Schemes In Your Ionic Framework App and see how he tested the scheme in the easy way.

Reference:
github repo: Custom URL scheme PhoneGap Plugin
video tutorial: Using Custom URL Schemes In Your Ionic Framework App
testing tool for android: easyhyperlinks.com

OnsenUI: Change tab without pressing ons-tabber's ons-tab (with AngularJs)

I have been searching around for changing tab with AngularJs $scope function, without pressing on the ons-tabber's tab.
This function will do the trick setActiveTab()
First, you have to specify name for the tabbar,

(eg. ons-tabbar[var="myTabbar"])

use setActiveTab() with index (just like array, start from 0) for myTabbar:
myTabbar.setActiveTab(1) for my case below.

AngularJs

var app = angular.module('app', ['onsen']);

app.controller('myCtrl', ['$scope', function($scope) {
  $scope.goHome = function() {
    // setActiveTab(index, options)
    myTabbar.setActiveTab(1, {animation: 'fade'});
  };
}]);

Html

<ons-page ng-controller="myCtrl">
  <ons-toolbar>
    <div class="right">
      Toolbar - myCtrl
    </div>
  </ons-toolbar>
  
  <ons-button ng-click="goHome()">Go Home</ons-button>

  <ons-tabbar var="myTabbar">
    <ons-tab active="true" icon="ion-images" label="App" no-reload="" page="app.html" persistent=""></ons-tab>
    <ons-tab icon="fa-user" label="Home" no-reload="" page="home.html" persistent=""></ons-tab>
  </ons-tabbar>
</ons-page>

Summary
The main part:

• use variable name for ons-tabbar
• use setActiveTab(index) with the tabbar variable name to redirect