Rails - 錯誤CSS樣式

新的rails，我正在嘗試更改默認的佈局。Rails - 錯誤CSS樣式

似乎.field_with_errors類總是被添加到我的表單，當一個字段導致驗證錯誤。默認支架CSS定義field_with_errors爲：

 
.field_with_errors { 
    padding: 2px; 
    background-color: red; 
    display: table; 
}

我的問題是：爲什麼即使使用此.field_with_errors？它甚至從哪裏來？與ID爲notice的div一樣，可以打印成功消息。這是從哪裏來的？...從我的研究中，這兩個來自ActionView::Helpers。

但是，如果我想使用我自己的自定義樣式這些？我是否必須在我的application.css.scss文件中編寫我自己的.fields_with_errors和notice類？我試過這個，它可以工作......但爲什麼我必須把自己監禁給這些類名？如果我想給他們打電話呢？我可以這樣做嗎？其次，讓我們說我現在有我自己的自定義CSS類（假設它是可能的 - 我希望它是這樣）...如果我想對它們應用引導樣式，該怎麼辦？例如，引導程序將使用<div class="alert alert-success">，其中Rails的腳手架將默認使用<div id="#notice"> ...如何以最優雅的方式進行此類更改，而無需使用與Twitter的alert alert-success相同的CSS代碼製作自己的樣式.... Isn'在SASS中（或通過Rails以某種方式）說，成功消息用XYZ樣式打印，錯誤字段用ABC樣式打印 ...也許在某些配置文件中？

謝謝！

來源

2013-05-30 Ricky

我可以這樣做嗎？是的。

額外的代碼正在被添加ActionView::Base.field_error_proc。如果你想打電話給別的東西你不使用field_with_errors樣式表單，你應該重寫它config/application.rb

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

重新啓動服務器

其次，如果你想將自舉樣式應用於它們，您可以保存您的選擇樣式application_helper.rb

module ApplicationHelper 
def flash_class(level) 
    case level 
    when :notice then "alert alert-info" 
    when :success then "alert alert-success" 
    when :error then "alert alert-error" 
    when :alert then "alert alert-error" 
    end 
end 
end

創建文件layouts/_flash_message.html.erb並粘貼此：

<div> 
    <% flash.each do |key, value| %> 
    <div class="<%= flash_class(key) %> fade in"> 
     <a href="#" data-dismiss="alert" class="close">×</a> 
     <%= value %> 
    </div> 
    <% end %> 
</div>

，並打電話給你只是在視圖渲染

<%= render 'layouts/flash_messages' %>

例

在accounts_controller.rb閃光燈創建行動

def create 
    @account = Account.new(params[:account]) 
    if @account.save 
    # using :success if @account.save 
    flash[:success] = "Success." 
    redirect_to accounts_url 
    else 
    flash[:alert] = "Failed." 
    render :new 
    end 
    end

認沽在...上的accounts/index.html.erb p和對形式的頂部accounts/_form.html.erb

<%= render 'layouts/flash_messages' %>

結果對指數：

<div class="alert alert-success"> 
    <button type="button" class="close" data-dismiss="alert">×</button> 
    Success. 
</div>

結果的形式：

<div class="alert alert-error"> 
    <button type="button" class="close" data-dismiss="alert">×</button> 
    Failed. 
</div>

來源

2013-05-30 17:07:10

感謝您的詳細回覆。我正在嘗試第一部分來重寫樣式，但它似乎不起作用。我將代碼放在我的application.rb文件中，完全按照您的要求，並將該類更改爲我的自定義類。當我再次渲染頁面時，它仍然將'field_with_errors'顯示爲錯誤類名稱，而不是我在該筆記上插入'error_fields' – Ricky

的自定義類別......覆蓋這些默認樣式的正確做法是什麼？例如，我認爲默認佈局不足以滿足任何想要良好用戶界面的人:-)那麼人們通常會如何重寫它呢？標準做法是否會覆蓋過程？或者，人們只是將'.fields_with_errors'作爲類並將它們寫在CSS上呢？ – Ricky

您是否在將服務器添加到'application.rb'之後重新啓動服務器？ –

@anonymousxxx答案似乎是在我看來是正確的。

我會建議你爲你的css使用twitter-bootstrap-rails gem（https://github.com/seyhunak/twitter-bootstrap-rails）。看看github上的自述文件，這個寶石真的很方便。

來源

2013-05-30 17:14:19 Mattherick

Rails - 錯誤CSS樣式

回答

相關問題