根据条件动态填充 div答案

【问题标题】：Dynamically filling a div based on a condition根据条件动态填充 div
【发布时间】：2014-10-03 18:09:09
【问题描述】：

在我的应用程序中，当我保存帖子或主题时，我会在视图中弹出引导 Flash 消息。当它们出现时，它们会出现在内容的顶部并将内容向下移动。然后，当我关闭 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 和 class="flash-message-space" 是我希望发送消息的地方。

<!-- Single Post View -->

<div class="flash-message-space" name="flash-message"></div>

<div class="col-md-8">

<h1 class="page-title"><%= @post.title %></h1>

<div class="button">
<% if policy(@post).edit? %>
      <%= link_to "Edit", edit_topic_post_path(@topic, @post), class: 'btn btn-success' %>
    <% end %>
</div>

<div class="break-float"></div>

<div class="row">
    <div class="post-box">

    <p><%= @post.body %></p>
  </div>
</div>
  <div class="col-md-4">

  </div>
</div>

如果您需要查看更多信息，这里是我的 Github 存储库：https://github.com/Adoyle2014/Bloccit

【问题讨论】：

+1 表示“我讨厌运动”

标签： html css ruby-on-rails ruby

【解决方案1】：

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

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

希望对你有帮助。

【讨论】：

如何在 Ruby 中使用 JQuery？我是 Ruby 新手，所以我不确定如何整合它。
你所要做的就是包含 jquery-rails gem（按照这里的说明（github.com/rails/jquery-rails）。然后你可以声明标签如下：
Plus 1（如果可以的话）用于向我展示我将在其他项目中使用的咆哮。但无法让它在这个 rails 项目中工作。

【解决方案2】：

所以，当我在洗澡时（大多数好主意都来自这里），我突然想到我可以为警报类设置 position: absolute; 和 z-index: 999; 并且它起作用了。这种方法确实改变了警报的宽度，但这不是要解决的问题。

【讨论】：

【解决方案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>

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

【讨论】：