I have some issues with my dropdown menu over on rails. I'm pretty sure my code is ok, I think the main issue is with jquery and bootstrap but then again I may be wrong. I just don't know where I am mistaken. Thanks in advance!
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-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>
<a class="navbar-brand" href="#">WanderHomes</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<% if (!user_signed_in?) %>
<li><%= link_to "Log In", new_user_session_path %></li>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<% else %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<%= image_tag avatar_url(current_user), class: "img-circle avatar_small"%>
<%= current_user.fullname %> <span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Manage Listing</li>
<li>List Your Space</li>
<li>Your Reservations</li>
<li>Your Trips</li>
<li role="separator" class="divider"></li>
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Log Out", destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<% end %>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
This would be my application.js
require('jquery')
//= require popper
//= require bootstrap-sprockets
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
Try to add this into webpack/environment.js
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});
Then restart server
Hope it work !!!
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
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">
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>