2

我有一个简单的控制器来检查 ActiveModel 的有效性。如果模型有效，它会显示 :success 闪烁消息。如果不是，则显示错误闪烁消息。成功闪烁消息显示正确（绿色字体和背景）。错误消息未正确显示（红色背景上的字体不是红色）。我注意到这同样适用于 :notice 标志。当我将 :error 标志更改为 :warning 时，它会正确显示（黄色背景上的黄色字体）。我想这是某种奇怪的 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>

这是 :success flash 的截图：

在此处输入图像描述

这是 :error flash 的屏幕截图：

在此处输入图像描述

如您所见，错误闪烁以纯字体显示，没有背景。当控制器中的标志更改为 :warning 字体和背景设置正确时。所以只是 :error flash 和 :notice 标志没有正确显示。该怎么办？

4

2 回答 2

3

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

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

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

在引导程序中，样式化的 flash 类如下所示：

<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 与引导程序警报类匹配，您的上述代码就会为警报创建一个与引导程序的类命名匹配的 div，即flash[:success], flash[:info], flash[:warning], or flash[:danger]

或者，您可以修改<% flash.each %>application.html.erb 中的代码，但这会很臭。

于 2016-05-26T19:09:35.283 回答
0

如果它完全改变了外观（无论是否正确），那么这让我同意你的观点，它与 CSS 有关。

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

一旦您知道要弄乱哪个 ID/Class，您应该能够查看您的样式表并进行任何必要的调整或添加。

于 2014-10-19T16:32:45.700 回答