I am trying to learn Rails and during this time I wanted to make my pages a little more stylish. To do so I went ahead and downloaded Bootstrap 4 and followed all the installation instructions I could find. To test it I tried to add a simple navigation bar. The bar loads all the text fine but there is no CSS applied to it :(
All the bootstrap css and js files are in assets/stylesheet and /javascript
At this point I am not too sure what I am doing wrong or what needs to be changed. I am guessing it is something simple.
Gemfile
gem 'rails', '4.2.4'
gem 'execjs'
gem 'sass-rails', '~> 5.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'coffee-script-source', '~> 1.8.0'
gem 'bootstrap', '~> 4.0.0.alpha6'
gem 'jquery-rails'
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', media: 'all', "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Test</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
</html>
This is my
/assets/stylesheets/application.scss
#import "bootstrap";
This is my /assets/javascript/application.js
//= require jquery
//= require bootstrap
//= require bootstrap.js
//= require bootstrap.min.js
//= require jquery-3.1.1.min.js
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Thank you
I Think I found the issue.
I had two sass entries in the gemfile
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.6'
I commented out sass-rails and everything started working.
Related
I have implemented bootstrap into my ruby on rails application, in which there is a navbar. When running a server, the navbar, when in a shrunk browser (or on a mobile device), displays a 'hamburger' menu button. The problem is that this button has no action in my application, and does not display the rest of the navbar option.
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.5'
gem "passenger"
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
#gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
#gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'figaro'
#Boostrap web design framework gem
gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rails'
gem 'popper_js'
gem 'sass-rails'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
_navbar.html.erb
<html lang="en">
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="/"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item <%= 'active' if params[:controller] == 'home' %>">
<a class="nav-link" href="/">Home </a>
</li>
<li class="nav-item <%= 'active' if params[:controller] == 'contact' %>">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item <%= 'active' if params[:controller] == 'pricing' %> ">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item <%= 'active' if params[:controller] == 'shop' %> ">
<a class="nav-link">Shop</a>
</li>
</ul>
</div>
</div>
</nav>
application.scss
#import "bootstrap";
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="\">
<title></title>
</head>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
index.html.erb
<%= render "layouts/navbar" %>
Not really a rails question, but your html is faulty:
you have data- target in your button. Remove the whitespace.
I am fairly new to Rails and Bootstrap. I am struggling to incorporate Bootstrap4 Theme in a Ruby Rails website. All white space with some text is displayed when I try.
I have installed the BS4 bootstrap-rubygem. Infact the application website & all the basic BS Styling works fine with default stuff in place. However I have little luck in incorporation this Bootswatch Flatly Theme as I quite like this styling. On this page for Flatly Bootswatch it gives you 6 files to download i.e bootstrap.min.css, bootstrap.css, variables.less, bootswatch.less, _variables.sass, _bootswatch.sass. I assume I only need the sass files which begins with underscore in filename. So I have put these 2 files in assets/stylesheets folder. There are no js files to download on website so am I ok to assume that I don't need js files for assets/javascripts folder? So I have no js files pasted anywhere.
Here is my setup:
Gemfile:
source 'https://rubygems.org'(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
#Added by me
group :production do
gem 'pg', '~> 0.21.0'
end
# Added by MS
gem 'bootstrap', '~> 4.0.0.beta'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>OmegaBlog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="container-fluid">
<%= render 'layouts/navigation' %>
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</body>
</html>
application.scss (should this be called application.css.scss? and the order of #import items correct?? - I have doubt on this)
#import "bootstrap";
#import "variables";
#import "bootswatch";
application.js (again not confident on order of listed items here!)
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
So the problem is that the Navbar is all white which only some text visible:
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="navbar">Navbar</h1>
</div>
<div class="bs-component">
<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">
<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">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</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">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
</div>
</nav>
</div>
I have searched for basic instructions for detailed BS4 with Rails 5.1 but no luck!!
Those themes are built for the Bootstrap 3.X, though you are using bootstrap', '~> 4.0.0.beta'.
FYI https://github.com/thomaspark/bootswatch/issues/499
I started to program with ruby on rails and I tried to import bootstrap to my Ruby On Rails and I tried to insert an navbar to my app and thats the result:
Only text styles work
As you can see only the text style works..
My Gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.2.5'
# Use sqlite3 as the database for Active Record gem 'sqlite3'
# Use SCSS for stylesheets gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.1.0' gem 'coffee-script-source', '~> 1.11', '>= 1.11.1'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api. gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug' end
group :development do # Access an IRB console on exception pages or by using <%= console %> in views gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6'
end
My application.css.scss:
#import "bootstrap";
#import "bootstrap-sprockets";
My application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
My application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<%= yield %>
</body>
</html>
Thank you in advance!
Try writing
//= require bootstrap.min
In your application.js
You are using bootstrap-sass, so you need sass-rails gem. From the bootstrap-sass
In your Gemfile you need to add the bootstrap-sass gem, and ensure
that the sass-rails gem is present - it is added to new Rails
applications by default.
That said, add gem sass-rails in your Gemfile, then bundle install and restart the server
Update:
Also, you need to import bootstrap-sprockets before the bootstrap.
#application.css.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
I think it might be the fact that you have the gem 'bootstrap-sass' in the development group. This should go in the root of the Gemfile.
I am trying to load the gem from bootstrap and display a navbar on my page but it doesn't seem to work.
gemfile code
source 'https://rubygems.org'
gem 'rails', '4.2.4'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'bootstrap-sass'
group :doc do
gem 'sdoc', require: false
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
application.css.scss
#import 'bootstrap';
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Etsydemo</title>
<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'shared/navbar' %>
<div class= "container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
_navbar.html.erb
<nav class="navbar navbar-default navbar-fixed-top">
Toggle navigation
Etsydemo
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Contact</li>
<li>About</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
application.js
//= require jquery_ujs
//= require bootstrap
//= require jquery
//= require turbolinks
//= require_tree .
I think you need to import bootstrap sprockets as well as bootstrap. So the top of your application.scss file should have:
#import 'bootstrap-sprockets';
#import 'bootstrap';
Try reorganizing your application.js (assuming you have the bootstrap.js loaded into the asset pipeline...if you have the minified version it would be bootstrap.min)
//= require jquery_ujs
//= require jquery
//= require turbolinks
//= require bootstrap
//= require_tree .
Where exactly does that line of code go for a Rails application? Which file, and is there any additional surrounding syntax? Does anyone have a complete example of how to disable jQuery loading messages? I've read the documentation but I think there's just something really basic I'm missing that's not explicitly covered in the documentation.
Thanks
application.js
//= require jquery
//= require jquery_ujs
//= require jquery.mobile
application.mobile.js
//= require jquery.mobile
application.css
*= require_self
*= require jquery.mobile
*= require scaffolds.css
application.mobile.css
*= require_self
*= require jquery.mobile
Gemfile
source 'http://rubygems.org'
gem 'rails', '3.2.2'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'pg'
gem 'thin'
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier'
end
gem 'jquery-rails'
gem 'mobylette'
gem 'jquery_mobile_rails'
group :test, :development do
gem 'rspec'
gem 'rspec-rails'
gem 'sqlite3'
end
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Mobile Version!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<%= javascript_include_tag "application" %>
<script type='text/javascript'>
$.mobile.hidePageLoadingMsg();
</script>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application.mobile.js" %>
<%= stylesheet_link_tag "application.mobile.css" %>
<%= csrf_meta_tags %>
</head>
<body>
<div data-role="page">
<%= yield %>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<%= link_to notes_path, :class => ("ui-btn-active" if action_name == 'index'), :"data-icon" => "home", :"data-iconpos" => "top" do %>
Home
<% end %>
</li>
<li>
<%= link_to new_note_path, :class => ("ui-btn-active" if action_name == 'new'), :"data-icon" => "plus", :"data-iconpos" => "top" do %>
New Note
<% end %>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I think you may be misunderstanding the $.mobile.hidePageLoadingMsg(); method a bit. I can certainly understand the confusion though. In JQM you can programatically show the loading message using $.mobile.showPageLoadingMsg(); and then you would use $.mobile.hidePageLoadingMsg(); to hide the message. You could use that in your own ajaxing of certain content.
To disable the loading message you can use my example here.
<script src="//code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
The mobile init binding is used to configure defaults for JQM. It must be placed in between your jQuery and JQM references to work properly. You can find more default settings here.
To get that run everywhere, on all your pages, all the time, probably the best bet would be in app/views/layouts/application.html.erb. This assumes you are using an application wide layout. If you had just created a new rails app using 3.X, that's where you'd do it.
The simplest way to get it working is just stick it in the head of the layout, (ignoring the assets pipeline for now).
It sounds like (I'm not sure) that that's one bit of jquery where you DON'T want to wait for the DOM to load before you run the bit of code. So I'd put in in a script tag right after the default javascript_include_tag that the rails app generator placed in the layout:
<%= javascript_include_tag "application" %>
<script type='text/javascript>
$.mobile.hidePageLoadingMsg();
</script>
If that still doesn't do the trick, you'd have to delve into the app/assets/javascripts/application.js manifest, and enter a new line right after the one that loads jquery, and that line would call a javascript file that contains that one line of code.
Ok so basically, the moral of the story here is DONT user Gems for jQuery Mobile. Saying they don't work would be an understatement...they get 95% of the job done but then they puke so spectacularly that it's almost comical to think you tried to use them in the first place. These gems seem to (1) have an innate ability to explode when literally ANYTHING is updated that is remotely related to Rails and/or jQuery Mobile, (2) get abruptly and inexplicably delisted by their github owner, (3) throw awesomely rare and automagical errors, and (4) all for the awesome benefit of including MORE lines (that are by the way really sensitive to breaking) of code than if you were to just use jQuery Mobile hotlinks in the first place.
Save yourself a ton of headaches and just use hotlinks. If not, you'll win an all-expense paid vacation to suckville, sponsored by jQuery Mobile Gems, Inc (the latest versions of which, by the way, are almost guaranteed to be out of date and completely useless).
application.html.erb
<title>Hello</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>