csslayoutipad-mini

IPAD Mini - IOS 7.0 - Double Select Box Overlap


Screenshot

I have two select boxes as show on the image above. Now the issue is that when I click on the year field, the month field is still being triggered. Seemed like the area for the first select box is too wide or there is some kind of overlap.

Anyone know a work around for this please?

This is a web app by the way, if that helps. :)

        <label>
            <span>Expiration</span><br>
            <select class="card-expiry-month input-mini">
                <option value="01" >01</option>
            </select>   
            <select class="card-expiry-year input-mini">
                <option value="2014">2014</option>            
            </select>            
       </label>

Not sure if it's because of the label?


Solution

  • It's because you have the <label> surrounding both elements. If you move the label to not wrap both elements, it will work:

    <label>
        <span>Expiration</span><br>
        <select class="card-expiry-month input-mini">
            <option value="01" >01</option>
        </select>
    </label>
    <label>
        <select class="card-expiry-year input-mini">
            <option value="2014">2014</option>            
        </select>
    </label>