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">
Related
I have a bootstrap navbar (version 3.3.7 - code shown below) on all pages of my ROR webapp. It has two dropdowns that work great most of the time, but quite often (about 10-15% of the time) they will just randomly stop working.
Sometimes all it takes is a quick page refresh to set things straight, and other times it takes hopping around to multiple different pages (or refreshing multiple times) to make it work again - there seems to be no definitive pattern. While refreshing the page a few times isn't the end of the world, it's obviously not ideal for end users. Any tips?
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand"><%= link_to "Home", root_path %></span>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "Dashboard", root_path %></li>
<li><%= link_to "Add", add_new_object_path %></li>
<li><%= link_to "Cards", cards_show_path %></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stuff<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Extra Resources", extra_resources_path %></li>
<li><%= link_to "Preferences", '#' %></li>
<li><%= link_to "Contact", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "About", '#' %></li>
<li><%= link_to "Sign Out", destroy_user_session_path %></li>
</ul>
</li>
**<!-- this area (both above and below) is where it stops working sometimes -->**
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Teacher Tools<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Verifications" %></li>
<li><%= link_to "Error Classification", new_correction_storage_path %></li>
</ul>
</li>
</ul>
<!-- TODO: not sure where to put the search bar currently! -->
<!-- defining the top padding with class="top-search" is maybe sub-optimal -->
<form class="form-inline float-xs-right top-search">
<input class="form-control" type="text" placeholder="Input a word or phrase">
<button class="btn btn-outline-success" type="submit">Langification</button>
</form>
</div><!--/.nav-collapse -->
</div>
</nav>
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
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.
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>