I am currently using Bootstrap 3 in conjunction with Ruby on Rails through the Rails Tutorial Sample App. Within my application, users have the ability to like, or "savor," microposts, referred to as "pops." My goal is to display Gravatar icons of users who have liked a post when there is more than zero likes. I have managed to implement this feature, but I am facing an issue where the dropdown menu, showing the Gravatar icons, automatically closes after a few seconds of opening. I would like the dropdown to remain open until the user either clicks on a thumbnail, somewhere else on the page, or on the button once more. Most examples I have come across do not utilize image thumbnails in this manner and typically feature ordered lists in the dropdown. Is my approach correct, or is there a better way to achieve this?
In addition, I lack experience in implementing JavaScript/jQuery functionalities. While I understand the code, I struggle with knowing where to place it and how to reference/include it for successful execution. If there is a JavaScript/jQuery solution to fix the closing dropdown issue, please provide specific guidance on its implementation.
Please note that this issue is distinct from a previously asked question where the dropdown menu vanishes upon clicking on it. I am able to quickly click on the thumbnail and access the link without any problems. However, the menu tends to close on its own after a short duration, preventing me from clicking on anything while my cursor remains on it. This can be particularly frustrating on mobile devices, as the dropdown consistently closes just as you are about to tap on a thumbnail.
_micropost.html.erb
<li id="micropost-<%= micropost.id %>">
<%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
<span class="user"><%= link_to micropost.user.name, micropost.user %></span>
<span class="content">
<%= micropost.content %>
<%= image_tag micropost.picture.url if micropost.picture? %>
</span>
<span class="timestamp">
Popped <%= time_ago_in_words(micropost.created_at) %> ago.
<span class="dropdown">
<% if micropost.likers(User).count == 0 %>
<div id="like">
<%= pluralize(micropost.likers(User).count, "savor", "savors") %>
</div>
<% else %>
<div class="btn-group"> //button dropdown
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" data-target="#" aria-haspopup="true" aria-expanded="false">
<%= pluralize(micropost.likers(User).count, "savor", "savors") %>
<span class="caret"></span>
</button>
<div class="user_avatars dropdown-menu" aria-labelledby="dropdownMenu1">
<% micropost.likers(User).each do |user| %>
<%= link_to gravatar_for(user, size: 30), user %>
<% end %>
</div>
</div>
<% end %>
<% if current_user.likes?(micropost) %>
<%= content_tag(:div, "Savored", class: "btn btn-xs btn-primary", disabled: true) %>
<% elsif (current_user != micropost.user) %>
<%= link_to 'Savor', micropost, action: :update, method: :put, class: "btn btn-xs btn-primary" %>
<% else %>
<% end %>
<% if current_user?(micropost.user) %>
<%= link_to "delete", micropost, method: :delete,
data: { confirm: "You sure?" } %>
<% end %>
</span>
</span>
</li>
from custom.css.scss
.user_avatars {
overflow: auto;
margin-top: 10px;
.gravatar {
margin: 1px 1px;
}
a {
padding: 0;
}
}
Thank you in advance for any assistance provided.