CODEWITHSUNDEEP
javascriptcsssencha-touch-2alignmenttext-alignment
Haradzieniec
Haradzieniec

Reputation: 9340

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

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?

Upvotes: 0

Views: 1415

Answers (2)

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

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;
}

Upvotes: 3

Sunil Kumar
Sunil Kumar

Reputation: 1794

The standard way to write this is as below:

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

No "input" after #myinput, try it!

Upvotes: 0

Related Questions