класс ошибки в классе zurb не корректно отображает

Question

im, используя фундамент 3, и задали класс пользовательской формы в моей форме, хотя проблема с имейте в виду, что выпадающие списки выбора и класс ошибок не работают так, как должны.

, что я надеюсь на то, что я могу иметь ширины полей выбора, чтобы быть установлен на той же ширины столбца в качестве сообщения об ошибках, чтобы сделать вид выглядел полированный

<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

Это reported bug (и, видимо, фиксированные 6 дней назад).

В то же время, вы можете легко исправить с двумя линиями CSS:

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

see it in action here.