CODEWITHSUNDEEP
htmlcssruby-on-railsruby
Dominofoe
Dominofoe

Reputation: 603

Dynamically filling a div based on a condition

In my application, when I save a post or topic I have bootstrap flash messages that will pop into the view. When they do appear, they appear at the top of the content and move the content down. Then when I close the flash message, the content moves back up. I hate the movement.

I would like to have the space allotted in the view already so the flash message can fill that void and not need to push the content down since it is already in position.

Here is my application.html.erb which holds the condition:

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

And here is a view page. The div with class="flash-message-space" is where i would like the messages to go.

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

Here is my Github repository if you need to see more: https://github.com/Adoyle2014/Bloccit

Upvotes: 2

Views: 778

Answers (3)

xander-miller
xander-miller

Reputation: 529

Both the answers offered would work. My first instinct was to wrap the the alert in a container div with a fixed width and height and no padding. Then the space would be saved regardless of whether there was a flash message or not.

custom css:

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

layout:

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

I think this offers more flexibility and is simpler than the other solutions.

Upvotes: 0

Dominofoe
Dominofoe

Reputation: 603

So, when I was in the shower (the place where most good ideas come from), it occurred to me that I could just set the position: absolute; and the z-index: 999; for the alert class and it worked. This method did change the width of the alert but that is not a problem to fix.

Upvotes: 0

Rudy Seidinger
Rudy Seidinger

Reputation: 1058

You can use Bootstrap Growl to show your notifications.

It is very easy to use and setup and will solve your problem in a matter of minutes.

Hope it helps.

Upvotes: 1

Related Questions