CODEWITHSUNDEEP
androidcsstwitter-bootstrapcordova
nick.stuart
nick.stuart

Reputation: 544

Android phonegap/bootstrap styling problems

I have a bootstrap (3.0rc1) application that I'm beginning to test out in Phonegap/Cordova and have found a few styling issues that I am not sure how to work around.

I was wondering if this is a problem with Bootstrap, or if anyone has had issues with the Android embedded browser not behaving well with certain styling rules.

See attached screenshot for what is happening. You'll notice that the select is basically un-styled, while the input-group button doesn't line up at all. This exact page works great in Chrome when served as a regular page. The input that says 'Test!' is actuall a select with 'form-control' as a style.

style issues with page through android embedded browser/phonegap

You can also see that other styling works just fine (inputs, buttons, even the menu bar).

Upvotes: 3

Views: 1627

Answers (1)

77120
77120

Reputation: 905

I had the same problem. after searching on the internet and combining different solutions i found this

first this javascript removes the form-control class if user agent is android so you will have the default style.

var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
}

and after that you can add some css

select{
  height:25px;
  width:100%;
  border: 1px solid grey;
  -webkit-appearance: listbox;
  background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==); /* a simple arrow img */
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
  padding-left: 5px;
}

optional you can even add some background-color

the most important one is

-webkit-appearance: listbox;

which can also be set to

-webkit-appearance: menulist-text;

Upvotes: 1

Related Questions