Search code examples
htmlcsstwitter-bootstrapcomboboxmonaca

combobox displaying weird bootstrap Monaca

I've been developing in Monaca IDE with bootstrap; the problem I'm having right now is that the combobox element displays half its height when I test the app in my cellphone(or any other cellphone) but in the preview it displays beautiful,

this is my combobox code:

<div class="input-group">
      <div class="input-group-addon">
           <ons-icon icon="fa fa-car" size="15px" fixed-width="false"></ons-icon>
      </div>
      <select ng-model="combo" id="miselect" class="btn btn-primary dropdown-toggle col-xs-12">
            <option>[ Seleccione parada ]</option>
            <option ng-repeat="parada in paradas">{{ parada }}</option>
      </select>
</div>

Has anyone encounter a problem like this before?

this is how it displays:

enter image description here

Solution

  • What I did to solve it was add in a class that had the <button> code from bootstrap, something like:

    .myclass{
  -webkit-appearance: button;
  cursor: pointer;
}

    I added that class to my select and works amazing!