單選按鈕故障 - 引導

我具有包括從圓形按鈕的輸入的形式4的應用程序：

<strong> Radio button options on form </strong><br> 
    <div class="form-group"> 
    &nbsp<%= f.radio_button :category, 'A' %> &nbsp <%= f.label "A", "A" %><br /> 
    &nbsp<%= f.radio_button :category, 'B' %> &nbsp <%= f.label "B", "B" %><br /> 
    &nbsp<%= f.radio_button :category, 'C' %> &nbsp <%= f.label "C", "C" %><br /> 
    </div>

第一時間的形式是裝，一切看起來是正確的：

enter image description here

我的問題是，如果失敗的形式，由於驗證錯誤（MI ssing需要輸入等等，隨時隨地上的形式），當頁面重新呈現，單選按鈕和標籤都顯示在兩個不同行：

enter image description here

我該如何解決這個問題？

更新每個生成的HTML是：原件（正確）：

<strong> Radio button options on form </strong><br> 
    <div class="form-group"> 
     &nbsp<input id="listing_category_1" name="listing[category]" type="radio" value="1" /> &nbsp <label for="listing_1">A</label><br /> 
     &nbsp<input id="listing_category_2" name="listing[category]" type="radio" value="2" /> &nbsp <label for="listing_2">B</label><br /> 
     &nbsp<input id="listing_category_3" name="listing[category]" type="radio" value="3" /> &nbsp <label for="listing_3">C</label><br /> 
    </div>

而對於重新渲染（不正確）：

<strong> Radio button options on form </strong><br> 
    <div class="form-group"> 
     &nbsp<div class="field_with_errors"><input id="listing_category_1" name="listing[category]" type="radio" value="1" /></div> &nbsp <label for="listing_1">A</label><br /> 
     &nbsp<div class="field_with_errors"><input id="listing_category_2" name="listing[category]" type="radio" value="2" /></div> &nbsp <label for="listing_2">B</label><br /> 
     &nbsp<div class="field_with_errors"><input id="listing_category_3" name="listing[category]" type="radio" value="3" /></div> &nbsp <label for="listing_3">C</label><br /> 
    </div>

來源

2014-03-05 dmt2989

您可以爲原始頁面和驗證頁面添加生成的HTML和CSS嗎？ – Mathias

檢查您的瀏覽器的開發人員工具，找出標記或CSS是否已更改。根據上述截圖，我們無法爲您做到這一點。 – meagar

謝謝，更新了HTML – dmt2989

這是因爲Rails包有錯誤的字段變成了div：

解決

的一種方式，可以自定義此css類，例如，使div顯示屬性inline而不是block：

.field_with_errors { display: inline; }

另一種選擇，修改Rails設置來改變默認的行爲顯示錯誤信息時：

config.action_view.field_error_proc = Proc.new { |html_tag, instance| "<span class='field_with_errors'>#{html_tag}</span>".html_safe }

來源

2014-03-05 21:59:51 markets

添加.field_with_errors {display：inline; }以CSS的魅力工作。謝謝！ – dmt2989

單選按鈕故障 - 引導

回答

相關問題