1

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?

pnuts
  • 58,317
  • 11
  • 87
  • 139
Severino Lorilla Jr.
  • 1,637
  • 4
  • 20
  • 33

1 Answers1

1

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>
ratherblue
  • 2,108
  • 11
  • 14
  • thanks man.. works like a charm.. I should focus more with the small details next time... (y) – Severino Lorilla Jr. Mar 06 '15 at 20:53
  • 1
    Np! Good luck. It's also always a good idea to have a label for an element for accessibility reasons, even if you hide it with CSS. Bootstrap has an "sr-only" class for this and explains more here: http://getbootstrap.com/css/#helper-classes-screen-readers – ratherblue Mar 06 '15 at 22:58