Частичное не рендеринг в рельсах - PullRequest
Новая
       34

Частичное не рендеринг в рельсах

0 голосов
/ 05 марта 2019

Попытка визуализировать следующий фрагмент: _no_login_required_links.html.erb @ root / index 

<li id="hobby">
  <%= link_to hobby_posts_path do %>
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> Find a hobby 
buddy
  <% end %>
</li>

 <li id="study">
   <%= link_to study_posts_path do %>
    <i class="fa fa-graduation-cap" aria-hidden="true"></i> Find a 
study buddy
  <% end %>
</li>

<li id="team">
  <%= link_to team_posts_path do %>
    <i class="fa fa-users" aria-hidden="true"></i> Find a team member
  <% end %>
</li>

Поэтому я поместил его в другой фрагмент с именем _side_menu

, это содержимое _side_menu 

<div id="side-menu"  class="col-sm-3">
  <ul id="links-list">
   <%= render 'pages/index/side_menu/no_login_required_links' %>
 </ul>
</div>`

по какой-то причине он не отображается при переходе на домашнюю страницу, однако, когда я помещаю частичку в этот файл: _main_content.html.erb, вот так он рендерится ... 

<div id="main-content" class="col-sm-9">
  <%= render @posts %>
  <%= render 'pages/index/side_menu/no_login_required_links' %>
</div><!-- main-content -->`

вот мой файл index.html.erb 

<%= render 'posts/modal' %>

<div class="container">
  <div class="row">
      <%= render 'pages/index/side_menu' %>
      <%= render 'pages/index/main_content' %>
  </div><!-- row -->
</div><!-- container -->

Я не хочу делать боковое меню в главном содержании частичным, хотя, есть причина, почему это происходит?

1 Ответ

0 голосов
/ 06 марта 2019

Я выяснил проблему ...

У меня был scss под названием mobile.scss, который регулирует стили веб-страницы в соответствии с размером экрана устройства, на котором она просматривается ..

В mobile.scss у меня были следующие стили: 

@media screen and (max-width: 767px) {
  .pc-menu {
    display: none !important;
  }
 }


#side-menu {
     display: none !important;
  }

#side-menu должен был существовать в @media screen and (max-width: 767px)

, поскольку его не было, он скрывал боковое менювсе вместе, независимо от размера экрана.

Размещение #side-menu внутри @media screen решило проблему.

...