zurb foundation error class not rendering correctly

Question

im using foundation 3, and have set the class of custom on my form, though the issue im having is with the select dropdowns and error class not working the way it should.

what i am hoping for is that i can have the widths of the select boxes to be set to the same column width as the error messages as to make the view looked polished

<div class="four columns">
    <select class="four columns" id="event_location_id" name="event[location_id]" style="display: none; "><option value="">None</option>
<option value="8">APK</option>
<option value="10">BAL</option>
<option value="11">BANK</option>
<option value="12">BANY</option>
<option value="13">BEN1</option>
<option value="14">BEN2</option>
<option value="15">BER</option>
<option value="16">BRU</option>
<option value="17">BTN</option>
<option value="18">CAM</option>
<option value="19">CAUL-Ind</option>
<option value="20">CER</option>
<option value="22">DAN</option>
<option value="23">DON</option>
<option value="24">DRO</option>
<option value="25">ELG</option>
<option value="26">ELT</option>
<option value="27">ES1</option>
<option value="28">ES2</option>
<option value="29">F-1</option>
<option value="30">F-2</option>
<option value="31">FP</option>
<option value="32">GEL</option>
<option value="33">GRN</option>
<option value="34">GRN-2</option>
<option value="35">H-1</option>
<option value="36">H-2</option>
<option value="37">HAL-1</option>
<option value="38">HAL-2</option>
<option value="39">HHF (prev WAV)</option>
<option value="40">HUN</option>
<option value="41">KNG</option>
<option value="42">KNX</option>
<option value="43">LAT</option>
<option value="45">MEL</option>
<option value="46">MGV</option>
<option value="47">MHS</option>
<option value="48">MNT</option>
<option value="49">MON</option>
<option value="50">MON-Ind</option>
<option value="51">MUH</option>
<option value="52">PCK</option>
<option value="53">PEGS</option>
<option value="54">PHC</option>
<option value="55">PSF</option>
<option value="56">RMIT</option>
<option value="57">S-1</option>
<option value="58">S-2</option>
<option value="59">S.N.H.C.</option>
<option value="60">SHP</option>
<option value="61">SKW</option>
<option value="62">STB</option>
<option value="63">T.B.A.</option>
<option value="64">TRI</option>
<option value="65">WARN</option>
<option value="66">WER</option>
<option value="67">WGS</option>
<option value="68">WGW</option>
<option value="69">WHF</option>
<option value="71">YAR</option>
<option value="72">YVG</option>
<option value="21">CHU</option>
<option value="70">WOD</option>
<option value="73">Test</option>
<option value="9">ASH</option>
<option value="7">ALT</option>
<option value="44">MBN</option></select><div class="custom dropdown" style="width: 155px; "><a href="#" class="current">None</a><a href="#" class="selector"></a><ul style="width: 155px; "><li class="selected">None</li><li>APK</li><li>BAL</li><li>BANK</li><li>BANY</li><li>BEN1</li><li>BEN2</li><li>BER</li><li>BRU</li><li>BTN</li><li>CAM</li><li>CAUL-Ind</li><li>CER</li><li>DAN</li><li>DON</li><li>DRO</li><li>ELG</li><li>ELT</li><li>ES1</li><li>ES2</li><li>F-1</li><li>F-2</li><li>FP</li><li>GEL</li><li>GRN</li><li>GRN-2</li><li>H-1</li><li>H-2</li><li>HAL-1</li><li>HAL-2</li><li>HHF (prev WAV)</li><li>HUN</li><li>KNG</li><li>KNX</li><li>LAT</li><li>MEL</li><li>MGV</li><li>MHS</li><li>MNT</li><li>MON</li><li>MON-Ind</li><li>MUH</li><li>PCK</li><li>PEGS</li><li>PHC</li><li>PSF</li><li>RMIT</li><li>S-1</li><li>S-2</li><li>S.N.H.C.</li><li>SHP</li><li>SKW</li><li>STB</li><li>T.B.A.</li><li>TRI</li><li>WARN</li><li>WER</li><li>WGS</li><li>WGW</li><li>WHF</li><li>YAR</li><li>YVG</li><li>CHU</li><li>WOD</li><li>Test</li><li>ASH</li><li>ALT</li><li>MBN</li></ul></div><small for="event_location_id" class="error">can't be blank</small>
  </div>

Answer 1

This is a reported bug (and apparently fixed 6 days ago.)

In the meantime, you can easily fix it with two lines of CSS:

.custom.dropdown {
    width: 100% !important;  /* fixes width issue */
}
.custom.dropdown + .error {
    margin-top: -9px;        /* fixes overlapping */
}

You can see it in action here.