Rails错误和通知闪烁无法正确显示css样式

Question

I have a simple controller which checks the validity of an ActiveModel. 我有一个简单的控制器，它检查ActiveModel的有效性。 If the model is valid it displays :success flash message. 如果模型有效，则显示：成功刷新消息。 If it is not, it displays error flash message. 如果不是，则显示错误闪烁消息。 The success flash message is displayed correctly (green font and background). 成功闪烁消息正确显示（绿色字体和背景）。 The error message is not displayed correctly (font is not red on red background). 错误消息未正确显示（红色背景上的字体不是红色）。 I've noticed that the same applies to the :notice flag. 我注意到同样适用于：notice标志。 When I changed the :error flag to :warning it displays correctly (yellow font on yellow background). 当我将：错误标志更改为：警告它正确显示（黄色背景上的黄色字体）。 I suppose it is some sort of weird css issue but I don't know how to debug it. 我想这是一些奇怪的CSS问题，但我不知道如何调试它。 Any suggestions? 有什么建议么？

Here is the code of the controller: 这是控制器的代码：

class SmsController < ApplicationController
  def send_text_message
    phone = PhoneNumber.new(pnumber: params[:phone]) 
    puts 'phone = ' + phone.pnumber
    if phone.valid?
      # code that sends a sms message..
      flash[:success] = "Message has been sent!"
      redirect_to :back
    else
      flash[:error] = "This is not a valid mobile number" #phone.errors.full_messages.join(". ")
      redirect_to :back
    end
  end
end

Here is the application.html.erb: 这是application.html.erb：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Appointment Save: ">
<title>Appointment Mate</title>
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
 <!-- Fixed navbar -->
 <%= render 'layouts/header' %>
 <div class="container">
 <% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
 <% end %>
 <%= yield %>
 </div>
 <%= render 'layouts/footer' %>
 <!-- Bootstrap core JavaScript ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!--%= javascript_include_tag "bootstrap.min" %-->
 <!--script src="assets/bootstrap.min.js"></script-->
</body>
</html>

Here is the view: 这是观点：

<div class="col-sm-offset-4 col-sm-4">
<br></br>
<br></br>
<br></br>
<%= bootstrap_form_tag url: '/sms/send' do |f| %>
  <%= f.telephone_field :phone, label: "Enter a valid UK mobile phone number"%>
  <%= f.submit "Send a reminder", class: "btn-custom-lighten btn-lg" %>
<% end %>
</div>

Here is the screenshot of a :success flash: 以下是a：成功flash的截图：

在此输入图像描述

Here is the screenshot of an :error flash: 以下是：错误flash的屏幕截图：

在此输入图像描述

As you can see, the error flash is shown in plain font and no background. 如您所见，错误闪存以纯字体显示，没有背景。 When the flag in the controller is changed to :warning the font and the background are set correctly. 当控制器中的标志更改为：警告字体和背景设置正确。 So it is just the :error flash and the :notice flag which are not displayed correctly. 所以它只是：错误闪存和：通知标志，没有正确显示。 What to do about it? 该怎么办？

Answer 1

TL;DR For your use case you should be using flash[:danger], rather than flash[:error]. TL; DR对于您的用例，您应该使用flash [：danger]，而不是flash [：error]。

I can see from your code that you are using Bootstrap, ie: 我可以从你的代码中看到你正在使用Bootstrap，即：

<div class="col-sm-offset-4 col-sm-4">

In bootstrap the styled flash classes are shown here : 在引导的风格闪光类显示在这里：

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Then in your application.html.erb code above you have: 然后在上面的application.html.erb代码中，您有：

<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
 <% end %>

You can see that your above code will create a div matching bootstrap's class naming for alerts as long as your flash message_type matches a bootstrap alert class, ie flash[:success], flash[:info], flash[:warning], or flash[:danger] 只要你的flash message_type匹配一个bootstrap警报类，即flash[:success], flash[:info], flash[:warning], or flash[:danger]你就可以看到上面的代码会创建一个div匹配bootstrap的类命名警报。 flash[:success], flash[:info], flash[:warning], or flash[:danger]

Alternatively you could modify your <% flash.each %> code in application.html.erb, but that would be pretty smelly. 或者你可以在application.html.erb中修改你的<% flash.each %>代码，但那会非常臭。

Answer 2

If it's changing appearance at all (whether to the right thing or not) then that leads me to agree with you that it has something to do with CSS. 如果它正在改变外观（无论是否正确）那么这使我同意你的看法，它与CSS有关。

It looks like the CSS class should be "alert-whatevertypeofresponse", in your two cases "alert-error" and "alert-notice". 看起来CSS类应该是“alert-whatevertypeofresponse”，在你的两种情况下，“alert-error”和“alert-notice”。 However, I would load up a page giving you the error response and inspect that error element to find out exactly what ID and/or class is being used on it. 但是，我会加载一个页面，为您提供错误响应并检查该错误元素，以确切地找出正在使用的ID和/或类。 Also, check the parent elements to make sure there aren't any weird "!important" rules being inherited. 另外，检查父元素以确保没有任何奇怪的“！important”规则被继承。

Once you know which ID/Class to mess with you should be able to look through your stylesheet and make any necessary adjustments or additions. 一旦你知道要弄乱哪个ID / Class，你应该能够查看样式表并进行任何必要的调整或添加。

Rails错误和通知闪烁无法正确显示css样式

问题描述

2 个解决方案

解决方案1
3 2016-05-26 19:09:35

解决方案2
0 2014-10-19 16:32:45

Rails错误和通知闪烁无法正确显示css样式

问题描述

2 个解决方案

解决方案1 3 2016-05-26 19:09:35

解决方案2 0 2014-10-19 16:32:45

解决方案1
3 2016-05-26 19:09:35

解决方案2
0 2014-10-19 16:32:45