Ошибка Rails и уведомление о флеше не отображаются должным образом с помощью CSS-стиля

У меня есть простой контроллер, который проверяет действительность ActiveModel. Если модель действительна, она отображает: успешное флеш-сообщение. Если это не так, отображается сообщение об ошибке. Flash-сообщение об успехе отображается правильно (зеленый шрифт и фон). Сообщение об ошибке отображается неправильно (шрифт не красный на красном фоне). Я заметил, что то же самое относится и к флагу: уведомления. Когда я изменил флаг: 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

Вот приложение.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>

Вот скриншот из: успеха вспышки:

Вот скриншот ошибки: flash:

Как видите, сообщение об ошибке отображается простым шрифтом и без фона. Когда флаг в контроллере изменяется на: предупреждение, шрифт и фон установлены правильно. Так что это просто: ошибка и флаг: уведомление, которые отображаются неправильно. Что с этим делать?

Источник

2 ответа

TL;DR Для вашего случая использования вы должны использовать вспышку [: опасность], а не вспышку [: ошибка].

Из вашего кода я вижу, что вы используете 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 %>

Вы можете видеть, что ваш приведенный выше код будет создавать div, соответствующий имени класса начальной загрузки для предупреждений, если ваш flash message_type соответствует классу предупреждений начальной загрузки, т.е. flash[:success], flash[:info], flash[:warning], or flash[:danger]

Или вы можете изменить свой <% flash.each %> код в application.html.erb, но это было бы довольно вонючим.

Источник

Если это вообще меняет внешний вид (правильно ли это или нет), то это заставляет меня согласиться с вами, что это как-то связано с CSS.

Похоже, что класс CSS должен быть "alert-whatearitypeofresponse", в ваших двух случаях "alert-error" и "alert-alert". Однако я бы загрузил страницу с ответом на ошибку и проверил этот элемент ошибки, чтобы точно определить, какой ID и / или класс используется на нем. Кроме того, проверьте родительские элементы, чтобы убедиться, что нет никаких странных "! Важных" правил, которые наследуются.

Как только вы узнаете, с каким ID/ классом связываться, вы сможете просмотреть таблицу стилей и внести необходимые изменения или дополнения.

Источник
Другие вопросы по тегам