Phonegap & Android - How to Use The New Select List Style

PhoneGap & Android - How to use the new select list style

You can't but more important you should not!

Each mobile platform has its own design principles which are designed to keep best user's interest in mind. For iOS it could even mean that your app will be rejected.

Even different android builds tend to have different ui principles like in your pictures where the first one shows the select menu from original android and the last shows the select menu from samsungs android.

So you can't style the select menu using css. However you could write a phonegap plugin to give you a custom select menu.

Another option would be to build a select menu without html's select but just javascript. But I would not suggest that.

WebView/Phonegap change select (dropdown) style

There is no easy way to achieve that. What you need to do there is to build a native plugin that will open a custom dialog when you click on a <select>.

That dropdown you want to get rid of is the default view for selects on webviews, opposed to the second one that was built in chrome. To help getting you started:

//get all the options and store in an array

var values = $.map($('#group_select option'), function(e) { return e.value; });

//Native function that gets the options and display a dialog

function void showDialog(String[] values){
    AlertDialog.Builder b = new Builder(this);
    b.setTitle("Example");
    b.setItems(values, new OnClickListener() {

    @Override
    public void onClick(DialogInterface dialog, int which) {

        dialog.dismiss();
        switch(which){
        case 0:
            //call some javascript method to use this value here
            break;
        case 1:
            //call some javascript method to use this value here
            break;
        }
    }

});
b.show();
}

Make sure to set your theme to Holo or Holo.Light as you prefer, and do your preferred bit to call a native code from the javascript layer whenever there is a click on a select element.

select box not displaying on Android in PhoneGap

In this case the problem was actually cased by jQTouch. To fix it, just comment out these 4 lines in jqtouch.css

Under "body"

  /*-webkit-perspective: 800;*/
  /*-webkit-transform-style: preserve-3d;*/ 

Under "body > * "

/*-webkit-backface-visibility: hidden;*/
/*-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);*/

phonegap select options issue in webview on Android 6.0

I have looking around and found this code to fix the problem:

var allSelectElements = document.getElementsByTagName("select");

for (var i = 0; i < allSelectElements.length; i++) {
allSelectElements[i].addEventListener("touchstart", function () {
//This is the important line
$(this).focus().click();
//e.stopPropagation();

}, false);
}

setting select to width 100% disables select function on android 5.1.x and Nexus-7 (phonegap build)

Try setting an id for the element you want to modify,

then try

$('#select').css('width', '100%');

if id="select"

---

Related Topics