<div class="dropdown pull-right">
<a id="dropdown" data-toggle="dropdown" aria-haspopup="false" aria-expanded="true">
<%= theme_icon_tag "settings" %>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdown" style="padding: 0.25em">
<li><%= link_to "Edit", edit_book_review_path(review.book, review), class: "btn btn-outline-primary dropdown-item" %></li>
<li><%= link_to "Delete", book_review_path(review.book, review), method: :delete, data: {confirm: "Are you sure?"}, class: "btn btn-outline-danger dropdown-item" %></li>
</ul>
</div>
<% end %>
<% end %>
</div>
This is my dropdown and it's working fine on desktop.
Ive got my phone laying around and wanted to test it's functionality and I realized that I am not able to click the icon to open the dropdown-menu.
Why is that?
This link will help you stackoverflow.com/a/17841690/6392696
Find this file bootstrap.min.js , In substring
"ontouchstart"
Replace it with
"disable-ontouchstart"
Hopefully this will help!
Related
I have followed Hartl's tutorial to make a ToDoList with a tagging system, also with the help of this word guide and video.
However, as a consequence of making an additional page for filtered tasks, the html isn't rendering in a nice aligned manner as before. This can be seen from the footer file's image, which is not centralised, hence not aligned with the footer's sentence(which is still centralised),
while my home page doesn't seem to have this problem.
Does anyone know the solution to the problem? I'm really bad with working with these html files embedded with Ruby due to the fact the rendering occurs almost everywhere. Moreover, I didn't really understand how the tutorial was able to the filtering possible the moment we click the tags. I do not need the text box as per the home page feed. Do let me know if more information is required.
Html code for involved files in log
application.html.erb(the general layout of any page)
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= render 'layouts/rails_default' %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |message_type, message| %>
<%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
<!-- <%= debug(params) if Rails.env.development? %> -->
</div>
</body>
</html>
<script>
$(document).on('ready page:load', function () {
$('#micropost_tag_ids').chosen({
allow_single_deselect: true,
width: '100%'
})
});
</script>
micropost/index.html.erb (Filtered Page)
<h1>Filtered Micropost Page</h1>
<div class = "col-md-8 offset-2">
<% #microposts.each do |micropost| %>
<p><%= truncate(micropost.content, length: 50) %></p>
<p><small>Tags: <%= raw micropost.tags.map(&:name).map { |t| link_to t, tag_path(t) }.join(', ') %></small</p>
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
<% if current_user?(micropost.user) %>
<%= link_to "Done", micropost_path(micropost), method: :delete, data: { confirm: "Keep up the good work!" } %>
<% end %>
</span>
<% end %>
</div>
Footer.html.erb
<footer class="footer">
<small>
A To-Do Manager</a>
by Prashin for
Prashin,
based on the rails tutorial guide by
Michael Hartl.
</small>
<nav>
<ul>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
</ul>
</nav>
<br>
<br><br>
<p align = center>
<%= link_to image_tag("AikenDueet.jpg", alt: "KenyuDueet"),
'www.google.com' %>
<br>I can do it!</p>
</footer>
header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "To-Do App", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Users <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "All Users", users_path %></li>
<li><%= link_to "Administrators", users_admin_path %></li>
</ul>
</li>
<% if logged_in? %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "#{current_user.name}", current_user %></li>
<li><%= link_to "Account Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Log out", logout_path, method: :delete %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<% end %>
</ul>
</nav>
</div>
</header>
Log
Rendered microposts/index.html.erb within layouts/application (199.0ms)
Rendered layouts/_rails_default.html.erb (55.9ms)
Rendered layouts/_shim.html.erb (0.2ms)
Rendered layouts/_header.html.erb (0.7ms)
Rendered layouts/_footer.html.erb (0.8ms)
Completed 200 OK in 278ms (Views: 259.1ms | ActiveRecord: 11.4ms)
This seems like a bootstrap grid system problem, you have your main content inside a div.container, but your footer is inside the same container and you don't define some columns on it.
Solution 1: Put the footer inside a row and define your columns
<div class="container">
<div class="row">
<%= render 'layouts/footer' %>
</div>
</div>
Solution 2: Put your footer on its own div.container and define your columns for it
<div class="container">
<% flash.each do |message_type, message| %>
<%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
<% end %>
<%= yield %>
<!-- <%= debug(params) if Rails.env.development? %> -->
</div>
<div class="container">
<%= render 'layouts/footer' %>
</div>
Here are two button tabs :
How to express
1:
<% if logged_in? %> then hide b button tag
2:
<% if studentlogged_in? %> then hide A button tag
both methods<% if logged_in? %> , <% if studentlogged_in? %> are valid
<% if logged_in? %> <<==#A button tab
<li><%= link_to "Users", users_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Log out", logout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Tutor Center", login_path %></li>
<% end %>
<% if studentlogged_in? %> <<==#B button tab
<li><%= link_to "StudentUsers", student_users_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", studentcurrent_user %></li>
<li>
<%= link_to "Settings", edit_user_path(studentcurrent_user) %>
</li>
<li class="divider"></li>
<li>
<%= link_to "Log out", studentlogout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Student Center", studentlogin_path %></li>
<% end %>
Maybe you mean this structure:
<% if studentlogged_in? %>
...
<% elsif logged_in? %>
...
<% end %>
Where that shows the student one, the regular one, or nothing, but never both.
I think this is what you want:
<% if logged_in %>
# render partial containing html code for button A
<% elsif studentlogged_in %>
# render partial containing html code for button B
<% else %>
# render both partials
<% end %>
My navigation bar currently looks like this:
My code is below:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
Text Planner
</a>
</div>
<% if user_signed_in? %>
<p class="navbar-text navbar-left">Welcome, <strong><%= current_user.first_name.to_s+" "+current_user.last_name.to_s %></strong></p>
<div class="nav navbar-nav navbar-right">
<%= link_to "Home", home_path, :class => 'btn btn-default navbar-button' %>
<div class="btn btn-default dropdown-toggle navbar-button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu</div>
<ul class="dropdown-menu">
<li><%= link_to "Search For Events", root_path %></li>
<li><%= link_to "My Bookmarks", user_bookmarks_path(current_user.id)%></li>
<li><%= link_to "My Upcoming Reminders", user_reminders_path(current_user.id)%></li>
<li><%= link_to "My Profile", user_path(current_user.id)%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
</ul>
</div>
<% else %>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", home_path, :class => 'navbar-text' %></li>
<li><%= link_to "Sign up", new_user_registration_path, :class => 'navbar-text' %></li>
<li><%= link_to "Login", new_user_session_path, :class => 'navbar-text' %></li>
</ul>
<% end %>
</div>
</nav>
How do I move the home and menu buttons to the left and center them vertically? Also, I would like to keep them clickable buttons while removing the outline of a button with the white background so they match the left side of my navigation bar. Thanks in advance.
It's very simple, actually, set your line-height and div height to the same (here's a quick example):
#navbar a{
width: 200px;
height: 40px;
display:inline-block;
color:white;
line-height:40px;
}
This is provided your buttons are formed using CSS, but I believe it works for other elements, as well.
I am facing a problem which is hard to explain in words but i will try my best.
Problem: Adding a modal in the header to my rails application makes other links disabled which are situated beside it until the modal is accessed.
Example: |Home| Mail |Settings(Modal Link)|
Above example is how my header looks and above mentioned three are links.
Until i access Settings modal, Home and Mail links remain disabled. But once i view Modal, i can access Home and Mail again.
When i used Chrome developer tools (Inspect Element), i could see that the Modal is hiding on top of those two Home and Mail links. After accessing Settings(Modal Link), There is no hidden Modal on top of those links and can be accessed.
Any inputs on it ?
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">
<%= image_tag 'logos/logo.png' %>
<%= image_tag 'logos/tagline.png' %>
</a>
<%= render 'shared/search' %>
<ul class="nav pull-right">
<% if !user_signed_in? %>
<li><%= link_to 'Join Us', new_user_registration_path %></li>
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to "Facebook", '#' %></li> <!-- user_omniauth_authorize_path(:facebook)-->
<% else %>
<li><%= link_to "Home", root_path %></li>
<% if current_user %>
<li class="dropdown">
<a class="dropdown-toggle notifySymbol" data-toggle="dropdown" href="#">
<%= notifyCount %>
</a>
<div class="dropdown-menu" style="max-height:450px; width:370px; overflow:auto">
<%= notify %>
</div>
</li>
<%end%>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<%= image_tag "#{#group.group_pic}", :size => '25x25', :class => "img-rounded" %>
<%= #group.group_name %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <%= link_to raw('<i class="icon-eye-open"></i> Edit Profile'), edit_profile_path %></li>
<li> <%= link_to raw('<i class="icon-edit"></i> Edit Settings'), edit_settings_path %></li>
<li> <%= list_groups %> </li>
<li class="divider"></li>
<li> <%= link_to raw('<i class="fa fa-user"></i> Admin Tasks'), '#', :data => {:toggle => 'modal', :target => '#myAdminModal'} %> </li>
</ul>
<% end %>
</ul>
</div>
</div>
</div>
<div class="modal fade" id="myAdminModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"> <i class="fa fa-tasks"> Admin Tasks</i> </h4>
</div>
<div class="modal-body">
<div class="tree" >
<ul>
<li>
<span class="badge badge-success"> <i class="fa fa-smile-o"> Send </i></span>
<ul>
<li>
<%= link_to "All Group", send_all_groups_path %>
</li>
<li>
<%= link_to "Selected Members", '#' %>
</li>
</ul>
</li>
<li>
<span class="badge badge-success"><i class="fa fa-envelope-square"> Send Messages</i> </span>
<ul>
<li>
<%= link_to "All Group", '#' %>
</li>
<li>
<%= link_to "Selected Members", '#' %>
</li>
</ul>
</li>
<li>
<span class="badge badge-warning"><i class="fa fa-paper-plane"> Send Group Invites </i> </span>
<ul>
<li>
<%= link_to "To Member", '#' %>
</li>
<li>
<%= link_to "To Non-Member", '#' %>
</li>
<li>
<%= link_to "Check Invite Status", '#' %>
</li>
</ul>
</div>
</div>
<div class="modal-footer" data-dismiss="modal" aria-hidden="true">
<p class = "btn btn-info" > Close </p>
</div>
</div>
</div>
</div>
I am using bootstrap for creating twitter like app. The contents on the nav bar, under "nav pull-right" disappears when the window size resized to small. How do i do that? Here is my erb file..
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<%= link_to "cntwitter", root_path, id: "logo" %>
<nav>
<ul class="nav pull-right" id="right_nav">
<li><%= link_to "Home", root_path %></li>
<% if signed_in? %>
<li><%= link_to "Users", users_path %></li>
<li id="fat-menu" class="dropdown">
Account <b class="caret"></b>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Sign out", signout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Sign in", signin_path %></li>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
The twitter bootstrap scaffolding, or grid, is static by default. It sounds like you want the contents of your web page to scale with the browser window. In that case, I would recommend using the "fluid" scaffolding :: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem