Gabriel Tortomano Gabriel Tortomano - 6 months ago 20
HTML Question

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

Has anyone encounter a problem like this before?

this is how it displays:

enter image description here


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

  -webkit-appearance: button;
  cursor: pointer;

I added that class to my select and works amazing!