stylesheet/css not working in rails - css

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.

Related

Bootstrap alert not dismissing when clicking `x` in Rails application

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

Bootstrap affix navbar only works on refresh

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 %>

Using h3 tag in place of spree logo makes formatting go awry

Deface::Override.new(:virtual_path => "spree/layouts/admin",
:name => "backend_logo",
:replace => 'erb[loud]:contains("spree/admin/shared/header")',
:partial => "layouts/backend_navbar")
I made a partial in layouts by copying the one on GitHub that matches the build (stable 3) of Spree I am using but replaced the Logo with an h3 heading.
It works, the heading comes up but the rest (sidebar-toggle and admin_login_navigation_bar) are no longer inline. sidebar-toggle is sitting under the sidebar and admin_login_navigation_bar has disappeared.
I thought it might be the CSS so I gave the h3 tag the same id and class as the image tag, as you can see below on either side of <h3>Boogie</h3>. I know there's probably a better way, like an override that just replaces the logo. I did that for the frontend but couldn't get it to work for the backend. Now I've played with this one so long that I'd really like to know what gives in this case.
<% admin = try_spree_current_user.try(:has_spree_role?, "admin") %>
<header class="header <%= admin ? "logged-in" : "logged-out" %>">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="navbar-header col-sm-3 col-md-2">
<h3 id="logo" class: "logo navbar-brand">Boogie</h3>
<% if admin %>
<span class="navbar-toggle" id="sidebar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
<% end %>
</div>
<% if admin %>
<div class="col-sm-9 col-md-10">
<div class="navbar-right" data-hook="admin_login_navigation_bar"></div>
</div>
<% end %>
</div>
</div>
</nav>
</header>

Modal window appears in my header instead of the main body

Here is the code i have for my modal window it is located in views/devise/registration/_newfile.html.erb folder
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
<div id="normalModal" class="modal fade" data-toggle="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="modal-title">Signup to sharebox</h1>
</div>
<div class="modal-body">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This is the button that this form makes
When clicked it gives the proper modal window,which appears as a popup,and the screen in the background gets darker as it should,everything works fine.
Question: How to put this button in my navigation bar,in the header? which is located in views/layouts/_header.html.erb,(my
layouts/application.erb file calls this partial)
I tried to put in my _header partial this code
<nav>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "log in", user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline" %></li>
<li><%= render "users/registrations/newfile" %></li>
<% end %>
</ul>
</div>
</nav>
As you see i used <%= render "users/registrations/newfile" %>
and the form appeared literally in my navbar,when i click on sign up button
When it actually should appear in the main layout,so the button is in my header but the form must appear in the main body or layout.
how can i fix it?
thank you
I think you need to show the signup dialog anywhere in the site where the SignUp button exists in the navigation bar. So for this make these changes in the code:
<nav>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "log in", user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline" %></li>
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
<% end %>
</ul>
</div>
</nav>
And outside this nav where you body is rendered using <%= yield %> or in the container whatever your layout is using for the main body in that add this
<%= render "users/registrations/newfile" %>
And from this partial remove:
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
as you have added this in the nav bar.
I hope this will do the job. Basically what you are doing is writing the dialog code in the layout itself but outside the nav bar. In the body of you view. Not in header.

Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right

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 .

Resources