Динамическое заполнение div на основе условия

В моем приложении, когда я сохраняю сообщение или тему, у меня есть загрузочные флеш-сообщения, которые появятся в представлении. Когда они появляются, они отображаются в верхней части содержимого и перемещают содержимое вниз. Затем, когда я закрываю флэш-сообщение, содержимое перемещается назад. Ненавижу движение.Динамическое заполнение div на основе условия

Я бы хотел, чтобы пространство было выделено в виде, поэтому флеш-сообщение может заполнить эту пустоту и не нужно толкать контент вниз, поскольку он уже находится в позиции.

Вот мой 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

источник

2014-10-03 Dominofoe

+1 для "* Ненавижу движение *" – 0112

Ха-ха, спасибо !!! – Dominofoe

Вы можете использовать Bootstrap Growl, чтобы показать свои уведомления.

Он очень прост в использовании и настройке и решит вашу проблему за считанные минуты.

Надеюсь, что это поможет.

источник

2014-10-03 18:14:59

Как вы используете JQuery в Ruby? Я новичок в Ruby, поэтому я не уверен, как его включить. – Dominofoe

Все, что вам нужно сделать, это включить jquery-rails gem (следуйте инструкциям здесь (https://github.com/rails/jquery-rails). Затем вы можете объявить тег следующим образом: –

Плюс 1 (если бы мог) для показа мне рычания, которое я буду использовать в других проектах, но не смог заставить его работать в этом проекте рельсов. – Dominofoe

Итак, когда я был в душе (место, откуда появились самые хорошие идеи), мне пришло в голову, что я могу просто установить position: absolute; и z-index: 999; для класса предупреждения, и это сработало. Этот метод изменил ширину предупреждения, но это не проблема для исправления.

источник

2014-10-04 15:24:18 Dominofoe

Оба предложенных ответа будут работать. Мой первый инстинкт заключался в том, чтобы обернуть оповещение в контейнере 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>

Я думаю, что это обеспечивает большую гибкость и проще, чем другие решения.

источник

2014-10-04 17:38:07

Динамическое заполнение div на основе условия

ответ

Смежные вопросы