CODEWITHSUNDEEP
csshtmlcordovaionic-framework
Christian Rodriguez
Christian Rodriguez

Reputation: 690

Select is showing the selected option partially

I have this problem. Whenever I use a select box, it only shows the selected option partially, like this:

enter image description here

This is the corresponding portion of the code:

<div class="col col-33">
<div class="row">
    <div class="col text-center">CALIBRE CABLE (AWG)</div>
    <div class="col"><label class="item item-input item-select">
<div class="input-label"></div>
    <select id="calibreMedRspta">
        <option disabled selected>Seleccione el calibre:</option>
        <option>350</option>
        <option>250</option>
        <option>4/0</option>
        <option>3/0</option>
        <option>2/0</option>
        <option>1/0</option>
        <option>2</option>
        <option>4</option>
        <option>6</option>
        <option>8</option>
        <option>10</option>
        <option>12</option>
    </select></label></div>
</div>

I'm using Phonegap, and ionic CSS (not the entire framework).

jsfiddle with ionic 1.2.4 CSS

ionic documentation

Upvotes: 0

Views: 167

Answers (2)

Naveen Kumar V
Naveen Kumar V

Reputation: 2809

Add to CSS file: 

option { display: table; }

or

Add to style attribute of option:

<option style="display: table;" value="AsLongAsItCanBe">Value1</option>

Upvotes: 0

Christian Rodriguez
Christian Rodriguez

Reputation: 690

Well, I fixed it by modifying the "width" of the select in the css file.

Upvotes: 1

Related Questions