Helo,
New to bootstrap and trying to use it with rails. I am trying to create a navbar and trying to display a link to the extreme right of the navbar which is not working. Here is my code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<%= link_to "Rubyblog", root_path, :class => 'brand' %>
</li>
<li>
Edit Account
</li>
<li>
Categories
</li>
<ul class = "nav pull-right">
Current User
</ul>
</ul>
</div>
I am trying to display the last link "Current User" to the extreme right of the navbar. Using div class"nav pull-right" doesn't seem to work: http://i.imgur.com/BEBcaIc.png
Please let me know what I am missing/doing wrong. Appreciate your inputs.
Thanks!
Mike
EDIT: Answering my question:
Pulled the "nav pull-right" out of the main "nav" class tag and it worked. Updated code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<%= link_to "Rubyblog", root_path, :class => 'brand' %>
</li>
<% if user_signed_in? %>
<li>
<%= link_to 'Edit Account', edit_user_registration_path %>
</li>
<li>
<%= link_to 'Categories', categories_path %>
</li>
<% if current_user.has_role? :admin %>
<li>
<%= link_to 'Users', users_path %>
</li>
<%end%>
<%else%>
<li>
<%= link_to 'Sign up', new_user_registration_path %>
</li>
<% end %>
</ul>
<ul class = "nav pull-right">
<li><%= link_to 'Welcome, '+current_user.name, edit_user_registration_path %></li>
</ul>
EDIT: Answering my question:
Pulled the "nav pull-right" out of the main "nav" class tag and it worked. Updated code in the EDIT section of my question
Have you tried making your current user like the following:
<li class="pull-right">
Current User
</li>
I'm pretty sure the reason it's losing it's styling is because you are nesting nav inside a nav.
I think you want to divide the navbar into navbar-left and navbar-right:
<nav class="navbar navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="active">
<%= link_to "Rubyblog", root_path, :class => 'brand' %>
</li>
<li>
Edit Account
</li>
<li>
Categories
</li>
</ul>
<ul class = "nav navbar-nav navbar-right">
Current User
</ul>
</div>
</div>
</nav>
The bootstrap docs talk about this and say they're a bit different than pull-right - this might explain why you're seeing issues. I haven't tested the above, but it's likely a good start.
Related
so I'm a total newbie, please do bear with me.
I'm following a course online where the instructor shows navbar appearing on homepage root path but also on other pages like the posts page. I followed exactly his instructions, but for some reason the navbar which is a partial, is only appearing on the homepage but NOT on the posts page - the code for navbar is as follow and the code for the other pages are all on https://github.com/cheese1884/-mywebsite
Thanks, guys.
<div class='container'>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<%= link_to "LessonRoll", root_path, class: 'navbar-brand' %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<%= link_to 'Home', root_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Posts', posts_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<% if current_user %>
<li class="nav-item dropdown">
<a class = "nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Admin Menu<span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<%= link_to "App Settings", app_setting_path(#app_setting), class: 'dropdown-item' %>
<div class="dropdown-divider"></div>
Link
</div>
</li>
<% end %>
</ul>
<ul class="nav navbar-nav ml-auto">
<% if !current_user %>
<li class="nav-item">
<%= link_to "Sign Up", new_user_registration_path, class: 'nav-link' %>
</li>
<li><%= link_to "Log In", new_user_session_path, class: 'nav-link' %>
</li>
<% else %>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download"><%= current_user.username if current_user %> <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<%= link_to "Edit Profile", edit_user_registration_path, class: 'dropdown-item' %>
<div class="dropdown-divider"></div>
<%= link_to "Log Out", destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
</div>
</li>
<% end %>
</ul>
</div>
</nav>
</div>
In your yeti.html.erb, you need to put the navbar outside the yield section:
<body>
<%= render partial: 'navbar' %> <!-- or code for navbar -->
<div>
<%= yield %>
</div>
</body>
Edit : multiple layouts explaination
Rails uses a simple convention to find the correct layout for your
request. If you have a controller called ProductsController, Rails
will see whether there is a layout for that controller at
layouts/products.html.erb. If it can't find a layout specific to your controller, it'll use the default layout at app/views/layouts/application.html.erb.
(source)
In your case you can add a custom layout such as yeti.html.erb and specify your PostsController to use this layout with layout 'yeti'
Why the navbar is appearing on homepage but not on post page (original question)
Because as i answered above, you need to add the navbar partial inside the yeti.html.erb layout same as you did in the application.html.erb layout.
Why the navbar design is different
Because in application layout you link the application.scss stylesheet which only imports bootstrap (here)
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
In the yeti layout, you link yeti/theme_manifest.scss as stylesheet which imports both "bootstrap" and the overriding "theme" (here)
<%= stylesheet_link_tag 'yeti/theme_manifest', media: 'all', 'data-turbolinks-track': 'reload' %>
I hope this will help you to see more clearly.
I am a new learner and I am confused using bootstrap code in rails, here is the example of the code:
<nav class="navbar navbar-default">
<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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "MARKET", root_path, class: "navbar-brand",id: "logo"%>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li><%= link_to "create doc", new_detail_path%></li>
<li><%= link_to "Signout", destroy_user_session_path, method: :delete %></li>
else
<li><%= link_to "login", new_user_session_path%></li>
<% end %>
</ul>
</div>
</div>
</nav>
I know the user part ul is wrong, I don't know how to use bootstrap in rails.
Is there any tutorial to learn bootstrap with rails because I am really confused to use bootstrap in rails.
Here the article how to integrate bootstrap in rails app:
https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1
I have an respec test. I have a Sizes controller and just trying to create a new size.
When i run the test i get this error and theres not much info on google about it.
It seems simple but i'm really stuck. Can anyone help please?
1) adding size allow a user to add a size
Failure/Error: visit sizes_path
ActionView::Template::Error:
undefined method `children' for nil:NilClass
My test is as follows
require "rails_helper"
RSpec.feature "adding size" do
scenario "allow a user to add a size" do
size = create(:size)
visit sizes_path
expect(page).to have_content("XXLarge")
end
end
Here is Factory Girl
FactoryGirl.define do
factory :size do
title "XXlarge"
end
end
Here is my Sizes controller
class SizesController < ApplicationController
def new
#size = Size.new
end
def create
#size = Size.new(size_params)
if #size.save
redirect_to root_url
else
render 'new'
end
end
def index
#sizes = Size.all
end
private
def size_params
params.require(:size).permit(:title)
end
end
Here is New View
<h1>Listing Of Sizes</h1>
<button type="button" class="btn btn-success"><%= link_to 'Create New Size', new_size_path %></button>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Size</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% #sizes.each do |size| %>
<tr>
<td><%= size.title %></td>
<td><%= link_to 'Show', size %><%= link_to 'Edit', edit_size_path(size) %><%= link_to 'Destroy', size, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
My layout header has children.
<header class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="/">SAFSY</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" >Womens</a>
<ul class="dropdown-menu" role="menu">
<% Category.find_by(name:"Women").children.each do |category| %>
<li> <%= link_to category.name, category %> </li>
<% end %>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" >Mens</a>
<ul class="dropdown-menu" role="menu">
<% Category.find_by(name:"Men").children.each do |category| %>
<li> <%= link_to category.name, category %> </li>
<% end %>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<% if logged_in? %>
<li><%= link_to "Dash", users_path %></li>
<ul class="nav navbar-nav">
<li class="dropdown">
Items<span class="caret"></span>
<ul class="dropdown-menu">
<li><%= link_to "New Item", new_item_path %></li>
<li><%= link_to "Edit Items", user_items_path %></li>
<li>Mass Upload Items</li>
<li>Upload Item Images</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
Profile<span class="caret"></span>
<ul class="dropdown-menu">
<li><%= link_to "View Profile", user_path(current_user) %></li>
<li><%= link_to "Edit Profile", edit_user_path(current_user) %></li>
</ul>
</li>
</ul>
<li><%= link_to "Messages", users_path %></li>
<li class="dropdown">
Settings<span class="caret"></span>
<ul class="dropdown-menu">
<li>Edit Money Back Policies</li>
<li>Edit Warranty Policies</li>
</ul>
</li>
<li><%= link_to "Log out", logout_path, method: "delete" %></li>
<% else %>
<li><%= link_to "Log In", login_path %></li>
<li>Sign Up</li>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header>
The solution is embarrassing. Ive been coding for 13 hours. I was redirecting to redirect_to root_url it should be to sizes_path
def create
#size = Size.new(size_params)
if #size.save
redirect_to sizes_path
else
render 'new'
end
end
Sorry for the newbie question, but can anyone see what I'm doing wrong? I followed the directions on the bootstrap website, and am unable to create a collapsing navbar in my web app. The list items under the ="nav pull-right" won't collapse when I decrease the width of the window. I think this maybe because I don't have a collapse plugin in my bootstrap.js. Could that be the issue?
<%= link_to "Catalyst", users_path, class: "brand" %>
<header class="navbar navbar-fixed-top navbar-inverse">
<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 "Webapp", users_path, class: "brand" %>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><%= link_to current_user.full_name, current_user %></li>
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Mailbox
<% if unread_count > 0 %>
(<%= unread_count %>)
<% end %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Received", messages_path %></li>
<li><%= link_to "Sent", sent_messages_path %></li>
</ul>
</li>
<li><%= link_to "Sign out", destroy_user_session_path, :method => :delete %></li>
</ul>
</div>
</div>
</div>
</header>
Change <div class="nav-collapse collapse"> to <div class="navbar-collapse collapse">
By default the links in the dropdown for the mobile container are on the left (as shown below):
Is there a way to get them to show up on the right and not the left? I tried using text-align:right; but it's not showing up clean:
You can create your own class, for example .align-right and add it to the .nav-collapse container to align the links to the right. This way your changes won't affect the other elements that rely on that class on the bootstrap stylsheet. Try this:
.nav-collapse.align-right {
text-align:right;
}
Then you can do this:
<div class="nav-collapse align-right"> ..links.. </div>
And your links will be placed on the right side instead.
Demo: http://jsfiddle.net/PWFSX/
From Bootstrap documentation:
http://getbootstrap.com/components/#navbar
You have to use these classes "navbar-form navbar-left
I used them like that:
<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="span10"></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>
<ul class='nav navbar-nav navbar-right'>
<% if user_signed_in? %>
<li><%= link_to 'Sign out', destroy_user_session_path, :method => :delete %></li>
<% else %>
<li><%= link_to 'Sing in', new_user_session_path %> </li>
<% end %>
</ul>
</div>
</div>