I'm trying to get my navbar to scale to a dropdown menu when the screen is made smaller. The dropdown menu does appear on a smaller screen, however, when I press the dropdown menu, nothing happens. It's supposed to present the navbar options up but this isn't happening, I'm wondering what I may be doing wrong.
This is my code in my application.html.erb file:
<!DOCTYPE html>
<html>
<head>
<title>FYP</title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "SL League", welcome_index_path, id: "logo" %>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<% if current_user %>
<li><%= link_to current_user.email, user_path(current_user.id) %> </li>
<li><%= link_to "Log Out", logout_path %></li>
<% else %>
<li><%= link_to "Sign Up", signup_path %></li>
<li><%= link_to "Log In", login_path %></li>
<% end %>
<li><%= link_to "Home", welcome_index_path %></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<%= yield %>
</div>
<% flash.each do |key, value| %>
<%= content_tag(:div, class: "alert alert-#{key}") do %>
<p><%= value %></p>
<% end %>
<% end %>
</body>
</html>
I also have imported bootstrap into my application css file but this doesn't do anything either.
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>
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'm trying to customise the navigation bar on a website. The part that I'm having trouble with is the three line thing that should reveal the rest of the menu in a drop down way when the screen is small.
When I click on the 3 line button, nothing happens and I can't access the rest of the menu bar but it changes colour when I click it so I know it knows that I have clicked on it.
Here is my application.html file:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to 'Home', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
</div>
</div>
</nav>
and here is the layout/navigation_links that list the links that I want to show
<%# add navigation links to this file %>
<% if user_signed_in? %>
<li><%= link_to 'Edit account', edit_user_registration_path %></li>
<li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
<% else %>
<li><%= link_to 'Sign in', new_user_session_path %></li>
<li><%= link_to 'Sign up', new_user_registration_path %></li>
<% end %>
<% if user_signed_in? %>
<li><%= link_to 'Users', users_path %></li>
<% end %>
and here is my application.css file (under assets/stylesheets)
body{
margin-right: 10px;
margin-left: 10px;
background-color: #eeeeee;
}
.navbar-inverse{
background-color: #000000;
}
.navbar-inverse{
border-color: #33aa22;
}
When the webpage is full size the rest of the menu bar appears and the navigation_links appear and work.
I have no clue why it isnt working when the page is small so any help would be great!
I am new to RoR. In this app, I have a a model called Clubs and a navigation bar on top. However, every view of Clubs becomes part of the navigation bar for some reason when the app is rendered. Here's a screenshot to show you what I mean:
This is the code I have:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BHSClubs</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="navbar navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-inner">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brookline High School</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<ul class="navbar-text pull-right">
<% if user_signed_in? %>
Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
<% if notice %>
<p class="alert alert-success">
<%= notice %>
</p>
<% end %>
<% if alert %>
<p class="alert alert-danger">
<%= alert %>
</p>
<% end %>
<%= yield %>
</ul>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
</body>
</html>
Show method
<div class="container">
<div class="row">
<div class="col-md-3">
<p class="lead">
<%= #club.name %>
</p>
<div class="list-group">
Information
Announcements
</div>
</div>
<div class="col-md-9">
<div class="thumbnail">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<p id="notice">
<%= notice %>
</p>
<p>
<h4>Name:</h4>
<%= #club.name %>
</p>
<p>
<strong>Description:</strong>
<%= #club.description %>
</p>
<p>
<strong>Location:</strong>
<%= #club.location %>
</p>
<p>
<strong>Picture:</strong>
<%= image_tag(#club.picture_url, :width => 600) if #club.picture.present? %>
</p>
<%= link_to 'Edit', edit_club_path(#club) %> |
<%= link_to 'Back', clubs_path %>
</div>
</div>
</div>
</div>
Any help is appreciated.
You're rendering your Clubs <%= yield %> inside the application navigation bar!, so you have to put <%= yield %> outside the navigation element, inside another bootstrap .container element.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BHSClubs</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="navbar navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-inner">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brookline High School</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<ul class="navbar-text pull-right">
<% if user_signed_in? %>
Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
<% if notice %>
<p class="alert alert-success">
<%= notice %>
</p>
<% end %>
<% if alert %>
<p class="alert alert-danger">
<%= alert %>
</p>
<% end %>
</ul>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<%= yield %>
</div>
</div>
</div>
</body>
</html>
how can i join the ruby code with the html code? I want that the html "href" link with the path (ruby). Could somebody help me? For example: <li class="active">Home</li> , the href linked to Ruby <%= link_to "Home", root_path %> .
Ill want that my Button Home, for example is linked with the Ruby root_path.
HTML Code
> <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>
> <a class="brand" href="#">My Workingtimes</a>
> <div class="nav-collapse">
> <ul class="nav">
> <li class="active">Home</li>
> <li>Log In</li>
> <li>Sign In</li>
> </ul>
> </div><!--/.nav-collapse -->
> </div>
> </div>
> </div>
RUBY CODE
<div id="container">
<div id="content">
<% if flash[:notice] %>
<p id="notice">
<%= flash[:notice] %>
</p>
<% end %>
<% if flash[:alert] %>
<p id= "alert">
<%= flash[:alert] %>
</p>
<% end %>
</div>
<div id="footer">
<%= link_to "Home", root_path %> |
<%= link_to "Sign In", new_user_path %> |
<% if user_signed_in? %>
<%= link_to "Logout", logout_path, method: :delete %> |
<%= link_to "My Workingtimes", mytimes_path %>
<% else %>
<%= link_to "Login", login_path %>
<% end %>
<%= yield %>
</div>
</div>
You can run rake routes and see what, for instance, root_path points to.
Unless you haven't made any changes, it probably points to /, in which case you can have href = "/"
This is assuming that you absolutely need to enter the path name in the HTML. Otherwise, I would highly recommend converting your .html to .html.erb and then use something like <%= link_to "Home", root_path %> as you had mentioned.