I'm building a review site using ruby on rails. When I code the drop-down menu, included in the code below, it won't expand.
I know from changing the code that the options are there and work, only the dropdown won't expand.
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<%= link_to "NDLabClub", root_path, class: "navbar-brand" %>
</div>
<ul class="nav navbar-nav">
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<% if user_signed_in? %>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "log In", new_user_session_path %></li>
<% end %>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<% Category.all.each do |category| %>
<li>
<%= link_to category.breed, dogs_path(category: category.breed), class: "link" %>
</li>
<% end %>
</ul>
</li>
<% if user_signed_in? %>
<li><%= link_to "Add Dog", new_dog_path%></li>
<% end %>
</ul>
</div>
</nav>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
Related
I'm trying to implement bootstrap into my ror app. For some reason my navs are not side by side, they are stacked on top.
Any suggestions?
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<%= link_to "Smart Health", root_path, class: "navbar-brand" %>
</div>
<ul class="nav navbar-nav">
<li><%= link_to "Register Doctor", sign_up_path %></li>
<% if signed_in? %>
<li><%= link_to "Sign out", sign_out_path, method: :delete %></li>
<% else %>
<li><%= link_to "Login", sign_in_path %></li>
<% end %>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Sort by Condition<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
</ul>
</li>
<% if signed_in? %>
<li><%= link_to "Your Patients", patients_path(user_id: current_user.id), class: "link"%></li>
<% end %>
<% if signed_in? %>
<li><%= link_to "Add Patient", new_patient_path %></li>
<% end %>
</ul>
</div>
</nav>
Try this if you use bootstrap 4
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<%= link_to "Smart Health", root_path, class: "navbar-brand" %>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<%= link_to "Register Doctor", sign_up_path, class: "nav-link" %>
</li>
<% if signed_in? %>
<li class="nav-item"><%= link_to "Sign out", sign_out_path, method: :delete, class: "nav-link" %></li>
<% else %>
<li class="nav-item"><%= link_to "Login", sign_in_path, class: "nav-link" %></li>
<% end %>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sort by Condition</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
</div>
</li>
<% if signed_in? %>
<li class="nav-item"><%= link_to "Your Patients", patients_path(user_id: current_user.id), class: "nav-link" %></li>
<% else %>
<li class="nav-item"><%= link_to "Add Patient", new_patient_path, class: "nav-link" %></li>
<% end %>
</ul>
</nav>
I have the below as my nav, however, the index.html.erb#meetflappy is throwing up an error:
Routing Error
No route matches [GET] "/preorder/index.html.erb"
I'd like it so that when users click meetflappy tab, they are brought to the index page and specifically to the #meetflappy part. Now this works when I'm on the index page and it just links to #meetflappy but when I'm on another page i'm having trouble here. Please advise:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="wrapper-nav">
<div class="navbar-header">
<%= link_to logo, root_path, class: 'brand' %></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class=""><%= link_to 'Meet Flappy', 'index.html.erb#meetflappy' %></li>
<li class=""><%= link_to 'Details', 'index.html.erb#details' %></li>
<li class=""><%= link_to 'FAQ', faq_path %></li>
<li class=""><%= link_to 'Flappy\'s Story', flappystory_path %></li>
<li class=""><%= link_to 'About Us', about_path %></li>
<li class=""><%= link_to 'Checkout', preorder_checkout_path %></li>
</ul>
</div>
</div>
</nav>
Change this:
<%= link_to 'Meet Flappy', 'index.html.erb#meetflappy' %>
to this:
<%= link_to 'Meet Flappy', root_path(anchor: 'meetflappy') %>
I am creating a sample app as a learner. How do I fix the code below to have "One Month Rails" appear on every page of my app, in the left of my navigation bar? Thank you!
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<% link_to "One Month Rails", root_path, class: "brand" %>
<div class="nav-collapse">
<ul class="nav">
<li>
<%= link_to 'Home', root_path %>
</li>
<li>
<%= link_to 'About', about_path %>
</li>
</ul>
<ul class="nav pull-right">
<% if user_signed_in? %>
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "Login", new_user_session_path %></li>
<% end %>
</ul>
</div>
</div>
</div>
This will work for you...
<%= Rails.application.class.parent_name %>
Or more specifically...
<%= link_to Rails.application.class.parent_name, root_path, class: "brand" %>
Don't forget the equals sign in front of the link_to call.
I don't seem able to get navbar collapse to work on my rails app
application.html.erb is
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/stylesheets/bootstrap-responsive.css" rel="stylesheet">
<%= analytics_init if Rails.env.production? %>
<title>Guidelines for Me</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<script type="text/javascript">
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
function clearText(){
search = $('.search-query');
if (search.defaultValue==search.value)
search.value = ""
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<% if Guideline.count % 100 ==0 %>
<%= link_to "#{Guideline.count}" " guidelinesforme available - yay!", guidelines_path, :class => 'brand' %>
<% else %>
<%= link_to "#{Guideline.count}" " guidelinesforme available!", guidelines_path, :class => 'brand' %>
<% end %>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
List guidelines by...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "...Topic", topics_path %></li>
<li><%= link_to "...Hospital", hospitals_path %></li>
<li><%= link_to "...Specialty", specialties_path %></li>
</li>
</ul>
<% if user_signed_in? %>
<li><%= link_to "Favourites", favourites_path %></li>
<% else %>
<li><%= link_to "Favourites", register_path %></li>
<% end %>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<% if user_signed_in? %>
<%= current_user.first_name %>
<% else %>
Log in or Sign up
<% end %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<% if user_signed_in? %>
<li ><%= link_to "Edit profile", edit_path %></li>
<li> <%= link_to "Log out", logout_path %></li>
<li> <%= link_to "My additions", profiles_show_path(id: current_user.profile_name) %></li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<li><%= link_to "Sign Up", register_path %></li>
<% end %>
<li><%= link_to "About us", about_path %></li>
</li>
</ul>
<li class="nav pull-right">
<%= form_tag guidelines_path, :class => 'navbar-search pull-right', :onSubmit=>"clearText(this)",:method => :get do %>
<%= text_field_tag :search, params[:search], :class => 'search-query input-small', :placeholder=>"Search", :ONFOCUS=>"clearDefault(this)" %> <% end %></li>
</ul>
</div>
</div>
</div>
<div class="container">
<% flash.each do |type, message| %>
<div class="alert <%= flash_class type %>">
<button class="close" data-dismiss="alert">x</button>
<%= message %>
</div>
<% end %>
<%= yield %>
</div>
</body>
<script src="/assets/js/bootstrap-dropdown.js"></script>
</html>
in my application.js
$(".collapse").collapse()
I'm not using the bootstrap gem, I just added bootstrap manually. I'm not sure if it's an issue with the plugin requirement or how to solve this.
Thanks
you need add
<script src="/assets/js/bootstrap-dropdown.js"></script>
at the end of the template
and
$(".collapse").collapse()
is inside of your_scripts.js not in your style.css file
I want to be able to replace Accounts tab on my navigation bar with the User's name when they logged in. How would i go about doing that. Would i have to use some sort of embedded ruby like <%= #user.name %>
heres the html
enter code here
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<%= link_to "sample app", root_path, id: "logo" %>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Help", help_path %></li>
<% if signed_in? %>
<li><%= link_to "Users", '#' %></li>
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", user_path(current_user) %></li>
<li><%= link_to "Settings", '#' %></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>
Try:
<%= current_user.name %>