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>
Related
I am learning about ruby-on-rails , and setting up a user based web page . At the moment I am trying to add a default bootstrap navbar , but the right side button , which should be the button to the About page is not showing
I have tried to add the class="active" tu the where the about button is , but still no success
<!DOCTYPE html>
<html>
<head>
<title>Saasapp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,700,800" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-
turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-
track': 'reload' %>
<nav class="navbar navbar-default navbar-static-top"
role="navigation">
<div class='container'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#main-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
DevMatch
</div>
<div class="collapse navbar-collapse" id="main-nav-
collapse">
<ul class="nav navbar-nav navbar-right ">
<li>About</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</head>
<body>
<div class="container">
<%= yield %>
</div>
</body>
</html>
It is showing (as a regular link) on my test page.
If you want it to be a button add classes btn btn-default:
<li><a class="btn btn-default" href="/about">About</a></li>
or in the Rails' way:
<li><%= link_to 'About', about_path, class: 'btn btn-default' %></li>
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>
I have a problem with the content of my application page in rails,I basically cannot put any content after the <% yield %> tag.
My problem is that when I put a footer underneath the <% yield %> it shows up over the yield content, not bellow. I am sure there is a simple solution for this but I just cannot get it to work as I would like to.
I anyone have an idea of were the problem could be would be really helpful.
<body>
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to (image_tag("logo.png", class:"food-image")), root_path%>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="sections"><%= link_to 'Dishes', posts_path %></li>
<li class="sections"><%= link_to 'Events', posts_path %></li>
<li class="sections"><%= link_to "About", about_path %></li>
<ul class="social-icons">
<li class="fa fa-twitter fa-2x"></li>
<li class="fa fa-facebook fa-2x"></li>
<li class="fa fa-instagram fa-2x"></li>
<li class="fa fa-pinterest fa-2x"></li>
</ul>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<% if current_page?(root_path) %>
<div class="image-header">
</div>
<% end %>
<div class="anchor">
</div>
<%= yield %>
<footer>
<div class="container-fluid" id="logs">
<div class="login-buttons">
<% if user_signed_in? %>
<button><%= link_to "New Post", new_post_path , class:"sing_in"%></button>
<button><%= link_to("Logout", destroy_user_session_path, :method => :delete, class:"sing_in") %></button>
<% else %>
<button><%= link_to("Login", new_user_session_path, class:"sing_in") %></button>
<% end %>
</div>
<p>lnjkbhjghfxgdzfxgchvjbknl</p>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
</div><!-- container-fluid-->
</footer>
Thanks in advance
This sounds like a CSS problem. If there's a float in the yield somewhere, you could need to clear it. Immediately after the yield and before footer, insert a spacer ...
<div style="clear:both"> </div>
Hopefully that puts you on the right track.
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.
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.