I'm trying to create a website for a friend of mine (for learning purposes also). And now I'm trying to create a affix navbar with Bootstrap. (BTW I'm coding on cloud9 using ruby on rails).
If I preview my site, the affix navbar works perfectly fine, but after clicking on a certain link in the navbar, the navbar just stays on his position below the banner. Through inspecting the element, I found out that the affix classes don't get appended to the navbar anymore, after clicking one of the links. I've spent some hours trying and fixing but nothing seems to work.
So I really hope that one of you guys can help me out.
Thanks in advance.
The code for my application.html.erb is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NL-Renovatie</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body data-spy="scroll" data-target="nav" data-offset="50">
<div class="container-fluid header">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
</div>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" data-spy="affix" data-offset-top="197">
<div class='container-fluid'>
<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>
<%= link_to root_path, class: 'navbar-brand' do %>
<i class="fa fa-home fa-lg"aria-hidden="true"></i>
Home
<% end %>
</div>
<div class="collapse navbar-collapse" id="main-nav-collapse">
<ul class="nav navbar-nav navbar-left">
<li id='navbar-button'>
<%= link_to overons_path do %>
<i class="fa fa-users" aria-hidden="true"></i>
Over Ons
<% end %>
</li>
<li id='navbar-button'>
<%= link_to new_contact_path do %>
<i class="fa fa-envelope" aria-hidden="true"></i>
Contact
<% end %>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container-fluid">
<% flash.each do |key, value| %>
<%= content_tag :div, value, class: "alert alert-#{key}" %>
<% end %>
<%= yield %>
</div>
</body>
</html>
The code for my application.css.scss is :
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
.header {
background-color:#F44336;
color:#fff;
height:200px;
}
The problem was caused by turbolinks. The fix was as following:
In the application.js file I had to remove the following line:
//= require turbolinks
And in the application.html.erb I've set both data-turbolinks-track to false:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
Related
The notification does not disappear when clicking the x.
I don't think there are any missing required css classes, so I'm not sure why this isn't working.
Before clicking x:
After clicking x:
application.html.erb
<html>
<body>
...
<% if flash[:notice] %>
<div class="alert alert-success alert-dismissible fade out in">
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
<%= flash[:notice] %>
</div>
<% elsif flash[:error] %>
<div class="alert alert-danger alert-dismissible fade out in">
<button class="close" data-dismiss="alert">×</button>
<% flash[:error].each do |msg| %>
<li>
<%= msg %>
</li>
<% end %>
</div>
<% elsif flash[:alert] %>
<div class="alert alert-warning alert-dismissible fade out in">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:alert] %>
</div>
<% end %>
</body>
</html>
Gemfile.rb
gem 'bootstrap-sass'
application.scss
#import 'bootstrap-sprockets';
#import 'bootstrap';
Is there anything else you can recommend that I try?
Solution.
Adding //= require bootstrap-sprockets to application.js.
I wasn't aware this was required in addition to #import 'bootstrap-sprockets'; in application.scss
I am new to ruby on rails and trying to develop a web application, the problem is my css is not loading. I am using a free template and trying to connect it with the back end but nothing worked. Only simple html buttons/ texts are loading .
application.html.erb
<title>InstagramApp</title>
<%= stylesheet_link_tag "default", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "default", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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="#">Start Bootstrap</a>
<%= link_to "Instagram", root_url, class: "navbar-brand" %>
</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>
<%= link_to "New Post", new_post_path %>
</li>
<%- if current_user %>
<% else %>
<li>
<%= link_to "Logout", new_user_session_path , method: :delete, confirm: "Are you sure?" %>
</li>
<%= link_to "Login", new_user_session_path %>
<li>
<%= link_to "Register", new_user_registration_path %>
</li>
<% end %>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<% flash.each do |a,b| %>
<div class="alert alert-success"> <%= b %> </div>
<% end %>
<%= yield %>
</div>
</div>
</div>
<style>body{padding-top:70px;}</style>
And in app/assets/stylesheets there is bootstrap.css and bootstrap.min.css .
How do i load css in localhost?
If you have place all your css files in stylesheet folder it will call automatically .If it doesn't then do rake assets:precompile and restart your server .
If your using bootstrap elements, It will be better to install the bootstrap gem here. Easy to install and allows you to use all bootstrap components.
install the following gems:
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
Change application.css to application.scss
app/assets/stylesheets/application.scss
In your application.scss add
#import "bootstrap-sprockets";
#import "bootstrap";
In app/assets/javascripts/application.js add
//= require jquery
//= require bootstrap-sprockets
Now you can use any bootstrap component, without needed to apply the style, this is a much better way to use bootstrap in your rails app.
I've got a Rails app that has a couple of 'static' pages and I plan to have more in the future.
Current file structure:
....
/assets/stylesheets/static.scss
....
/controllers/static_controller.rb
....
/views/static/home.html.erb
/views/static/feedback.html.erb
....
My Gemfile contains the 'bootstrap-sass' gem.
I want the home.html.erb view to have a different style from all the other 'static' pages, and specifically the following css:
html {
height: 100%;
background: url(assets/image.jpg) no-repeat center center;
background-size: cover;
font-family: Arial;
}
h1 {
color: black;
font-style: bold;
text-align: center;
}
How can/should this be achieved most efficiently? Would I need to create another controller/view/stylesheet for the home.html.erb?
CODE:
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Batuk</title>
<%= Gon::Base.render_data({}) %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to 'BATUK', root_path, class: "navbar-brand" %>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><%= link_to 'Summary', summary_path %></li>
<li><%= link_to 'Statement', statement_path %></li>
<li><%= link_to 'Balances', balances_path %></li>
<li><%= link_to 'Accounts', accounts_path %></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Feedback', feedback_path %></li>
<li><%= link_to 'Sign Out', root_path %></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</body>
</html>
One way would be to target your controller and action using CSS classes.
In your app/views/layouts/application.html.erb, add controller_name and action_name method calls to generate the CSS classes.
<body class="<%= controller_name %> <%= action_name %>">
CSS
html { height: 100% }
body.home {
height: 100%;
background: url('assets/image.jpg') no-repeat center center;
background-size: cover;
font-family: Arial;
}
.home h1 {
color: black;
font-style: bold;
text-align: center;
}
Create a layout with matching name,for your static_controller, template name should be static.html.erb.
then specify the layout in your controller
class staticController < ApplicationController
layout 'static'
end
Now I have the button with which, I can follow user, or un-follow.
Now when the target user is already followed. it's shown just like this.
Then the target user is not followed, it's shown just like this.
I'd like it to be shown 'following' when the target user is already followed.
Then when I bring mouse cursor over the button, the display should be changed to 'Un-Follow'.
How can I do that with bootstrap?
view
<% if user_signed_in? %>
<% unless user == current_user %>
<% if current_user.following?(user) %>
<%= link_to(unfollow_user_path(user), :remote => true, :class => 'btn') do %>
<i class="icon-remove"></i>
Un-Follow
<% end %>
<% else %>
<%= link_to(follow_user_path(user) ,:remote => true, :class => 'btn btn-primary') do %>
<i class="icon-ok icon-white"></i>
Follow
<%end%>
<% end %>
<% end %>
<% else %>
<%= link_to(new_user_session_path , :class => 'btn btn-primary') do %>
<i class="icon-ok icon-white"></i>
Follow
<%end%>
<% end %>
HTML
<a href="/user/1/follow" class="btn btn-primary" data-remote="true">
<i class="icon-ok icon-white"></i>
Follow
</a>
<a href="/user/1/unfollow" class="btn btn-primary" data-remote="true">
<i class="icon-remove icon-white"></i>
Un-Follow
</a>
UPDATE:
<a href="/user/1/unfollow" class="btn" data-remote="true" onhover="someFunction()">
<i id="Following" class="icon-remove"></i>
Following
</a>
Using the onHover event You can use jQuery to change the "class" attribute of the button you want to change the text too.
i.e.
<a href="/user/1/follow" onHover="someFunction();" class="btn btn-primary" data-remote="true">
<i id="Following" class="icon-ok icon-white"></i>
Following
</a>
someFunction() {
$('i#Following').attr("class", "icon-ok icon-white").innerText("Unfollow");
}
you get the picture hopefully.
Edit:
This is the full code that should fire the code in someFunction on mouse over.
<html>
<head>
<script type="text/javascript">
function someFunction()
{
alert("Hello");
}
</script>
</head>
<body>
<a href="/user/1/unfollow" class="btn" data-remote="true" onmouseover="someFunction();return true;" >
<i id="Following" class="icon-remove"></i>
Following
</a>
</body>
</html>
I am using Twitter bootstrap and Rails and I can't seem to float a navbar item to the right.
I tried using something like this:
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
... but the link stayed left and firebug showed "float:left;"
So I tried to overide the css float in bootstrap_and_overrides.css.less and in home.html.erb, but neither worked. Firebug indicated that it found two css float statements, but chose the bootstrap option over mine. So I am left stuck and wondering how to customize the navbar. I am probably doing something wrong here, but I just don't see it.
Here's my code:
application.html.erb:
<!DOCTYPE html>
<html>
<head>
... removed to shorten the length of this post
</head>
<body>
<header>
<%= render 'layouts/navigation' %>
</header>
<div id="main" role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
</body>
</html>
_navigation.html.erb:
<div class="container span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<%= link_to "Cases", root_path, :class=>"brand"%>
<% if user_signed_in? %>
<li> <%= link_to "My Cases", cases_path %> </li>
<li> <%= link_to 'Dash', dash_path %> </li>
<% if current_user.has_role? :admin %>
<li> <%= link_to 'Admin', users_path, :id=>"Admin" %> </li>
<% end %>
<li> <%= link_to 'Logout', destroy_user_session_path, :method=>'delete', :id => "Logout" %> </li>
<li class="whoami"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
<% else %>
<li> <%= link_to 'Login', new_user_session_path %> </li>
<li> <%= link_to 'Sign up', new_user_registration_path %> </li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
bootstrap_and_overrides.css.less:
#import "twitter/bootstrap/bootstrap";
body {
padding-top: 60px;
}
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
// ...REMOVED to shorten the length of this post
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// #linkColor: #ff0000;
.whoami {
float:right;
}
When I load a page, I see the navbar, but the last item is not floated to the right.
Looks like this:
And there is another screen cap here that shows some more info.
As you can see, firebug found a "float:right;" option, but indicates a "float:left;" option was used instead.
I have a gap in understanding here, but I am not sure where.
Please address responses to:
Use of pull-right and twitter bootstrap navbar formatting
Overriding css
Interpreting firebug output
EDIT:
I've posted my first ever jsfiddle here: http://jsfiddle.net/uCHQs/2/
It represents a copy/paste of a browser 'show source' and what I gather is the relevent css load and served by rails.
Thanks in advance!
Got it.
Getting it to work required filling the container nested in navbar-inner with more than one unordered list of nav elements. This jsfiddle showed me the way http://jsfiddle.net/N6vGZ/4/
This code works:
<div class="container span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<%= link_to "Cases", root_path, :class=>"brand"%>
<ul class="nav">
<% if user_signed_in? %>
<li> <%= link_to "My Cases", cases_path %> </li>
<li> <%= link_to 'Dash', dash_path %> </li>
<% if current_user.has_role? :admin %>
<li> <%= link_to 'Admin', users_path, :id=>"Admin" %> </li>
<% end %>
<li> <%= link_to 'Logout', destroy_user_session_path, :method=>'delete', :id => "Logout" %> </li>
</ul>
<ul class="nav pull-right"> <li> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li></ul>
<% else %>
<ul class="nav">
<li> <%= link_to 'Login', new_user_session_path %> </li>
<li> <%= link_to 'Sign up', new_user_registration_path %> </li>
</ul>
<% end %>
</ul>
</div>
</div>
</div>
</div>
have you tried being more specific with your CSS?
.navbar ul.nav li.whoami {
float:right;
}
Sometimes if the prior CSS (bootstrap in this case) is very specific, it requires the same level of specificity (or greater) to override it.
Might be helpful to post a jsfiddle. Screenshots are difficult to debug ;)
The code u have written is
class="nav navbar-nav" col-12
The above code can be replaced like this
class="nav navbar-nav col-12"
and also at next insert
class pull-right in your li button
Try commenting out the line
//...REMOVED
<li><span class="glyphicon glyphicon-chevron-right" style="float:right;"></span> Examples</li>
Add new class = "row"
what's happened ..in your code . when it is coming in mobile device then div is append on other div .
this is simple solution .