Sencha Touch 2: input placeholder in not centered in Android 4

Question

I'm trying to center the placeholder text. It looks centered on IOS, but still left aligned on Android 4.

/*css code is below*/
    #myinput input{
        text-align:center!important;
     }
    #myinput input::-webkit-input-placeholder{
        text-align:center!important;
     }


//the view (.js file) has
{
    xtype: 'emailfield',
    name: 'myinput',
    id: 'myinput',
    required: true,
    placeHolder: 'myinput (optional)',
    listeners: {
      //some listeners are here
    }
}

What am I missing?

Answer 1

Android has a bug here :(, centering just won't work. You can use this polyfill: https://github.com/diy/jquery-placeholder and it supports the "force" attribute. That attribute makes it run even on browser that "support" placeholder, like android.

$('#myInput').placeholder({force:true});

Then use regular CSS to style the placeholder class provided by the plugin

.placeholder{
  text-align: center;
}

Answer 2

The standard way to write this is as below:

#myinput::-webkit-input-placeholder{
        text-align:center!important;
}

No "input" after #myinput, try it!