Question

我有一个简单的控制器来检查ActiveModel的有效性。如果模型有效，则显示：成功刷新消息。如果不是，则显示错误闪烁消息。成功闪烁消息正确显示（绿色字体和背景）。错误消息未正确显示（红色背景上的字体不是红色）。我注意到同样适用于：notice标志。当我将：错误标志更改为：警告它正确显示（黄色背景上的黄色字体）。我想这是一些奇怪的CSS问题，但我不知道如何调试它。有什么建议吗？

以下是控制器的代码：

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

这是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>

以下是观点：

<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>

以下是a：success flash：

的截图

enter image description here

以下是：错误flash：

的屏幕截图

enter image description here

如您所见，错误闪存以纯字体显示，没有背景。当控制器中的标志更改为：警告字体和背景设置正确。所以它只是：错误闪存和：通知标志，没有正确显示。该怎么办？

Answer 1

TL; DR对于您的用例，您应该使用flash [：danger]，而不是flash [：error]。

我可以从你的代码中看到你正在使用Bootstrap，即：

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

在bootstrap中，样式化的flash类显示为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>

然后在上面的 application.html.erb 代码中，您有：

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

只要您的flash message_type与引导程序警报类匹配，即flash[:success], flash[:info], flash[:warning], or flash[:danger]

，您可以看到上面的代码将创建div匹配引导程序的警报类命名。

或者你可以在application.html.erb中修改你的<% flash.each %>代码，但那会非常臭。

Answer 2

如果它正在改变外观（无论是否正确）那么这会让我同意你的看法，它与CSS有关。

看起来CSS类应该是“alert-whatevertypeofresponse”，在你的两种情况下“alert-error”和“alert-notice”。但是，我会加载一个页面，为您提供错误响应并检查该错误元素，以确切地找出正在使用的ID和/或类。另外，检查父元素以确保没有任何奇怪的“！important”规则被继承。

一旦你知道哪个ID / Class乱七八糟，你应该能够查看你的样式表并做出任何必要的调整或补充。

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

2 个答案: