Question

在我的应用程序中，当我保存帖子或主题时，我会自动引导闪存消息进入视图。当它们出现时，它们会出现在内容的顶部并向下移动内容。然后当我关闭flash消息时，内容会向上移动。 我讨厌这个动作。

我希望已经在视图中分配了空间，因此flash消息可以填充该空白，而不需要将内容向下推，因为它已经处于适当位置。

这是我的application.html.erb，其中包含条件：

<!-- Global Elements -->


<!DOCTYPE html>
<html>
<head>
  <title>Bloccit</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body>
    <div class="container">
        <ul class="nav nav-pills">
            <li class="<%= "active" if current_page?(root_path) %>"> <%= link_to "Bloccit", root_path %></li>            
            <li class="<%= "active" if current_page?(topics_path) %>"> <%= link_to "Topics", topics_path %></li>
            <li class="<%= "active" if current_page?(about_path) %>"> <%= link_to "About", about_path %></li>

            <div class="pull-right user-info">
              <% if current_user %>
                <p id="user-name"><strong>Hello <em><%= link_to (current_user.name || current_user.email), edit_user_registration_path %></em>!</strong> as <%= current_user.role %></p>  
                <p id="link"><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></p>
              <% else %>
                <%= link_to "Sign In", new_user_session_path %> or
                <%= link_to "Sign Up", new_user_registration_path %>
              <% end %></p>
        </ul>


        <% if flash[:notice] %>
         <div class="alert alert-success">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
           <%= flash[:notice] %>
         </div>
       <% elsif flash[:error] %>
         <div class="alert alert-danger">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
           <%= flash[:error] %>
         </div>
       <% elsif flash[:alert] %>
         <div class="alert alert-warning">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
           <%= flash[:alert] %>
         </div>
       <% end %> 



<%= yield %>
</div> <!-- Container -->

</body>
</html>

这是一个视图页面。带有div的{{1}}是我希望留言的地方。

class="flash-message-space"

如果您需要查看更多内容，请访问我的Github存储库：https://github.com/Adoyle2014/Bloccit

Answer 1

您可以使用Bootstrap Growl来显示通知。

它非常易于使用和设置，可在几分钟内解决您的问题。

希望它有所帮助。

Answer 2

所以，当我在洗澡时（大多数好主意来自的地方），我突然想到我可以为警报类设置position: absolute;和z-index: 999;工作。此方法确实更改了警报的宽度，但这不是一个需要修复的问题。

Answer 3

提供的答案都可行。我的第一直觉是将警报包装在具有固定宽度和高度且没有填充的容器div中。然后无论是否有闪光信息，都会保存空间。

自定义css：

#alert-box {
  width: 100%;
  height: 3pc;
  padding: 0;
}

布局：

<div id='alert-box'>
   <% if flash[:notice] %>
     <div class="alert alert-success">
       <button type="button" class="close" data-dismiss="alert">&times;</button>
       <%= flash[:notice] %>
     </div>
   <% elsif flash[:error] %>
     <div class="alert alert-danger">
       <button type="button" class="close" data-dismiss="alert">&times;</button>
       <%= flash[:error] %>
     </div>
   <% elsif flash[:alert] %>
     <div class="alert alert-warning">
       <button type="button" class="close" data-dismiss="alert">&times;</button>
       <%= flash[:alert] %>
     </div>
   <% end %>
</div>

我认为这提供了更多的灵活性，并且比其他解决方案更简单。

根据条件动态填充div

3 个答案: