This is the first time I am asking a question on here so pardon me if I don't format this correctly.
I've been working with rails for the past month, so it's still relatively new for me. So far I've been able to find an answer to every question, but I can't seem to find an answer to this one.
When I went to bed last night my Bootstrap columns were aligned perfectly. When I woke up this morning they were all of a sudden completely out of alignment on every single one of my pages. By this I mean that, instead of a column structure, each column takes up a new row.
Here's my Gemfile:
gem 'rails', '4.1.6'
gem 'sqlite3'
gem 'sass-rails', '~> 4.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'bootstrap-sass'
gem 'httparty'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0',
gem 'spring',
gem 'bcrypt', '~> 3.1.7'
My custom.css.scss file starts with:
#import "bootstrap-sprockets";
#import "bootstrap";
and I've formatted most my html like this:
<div class="container">
<div class="row">
<div class="col-md-2">
stuff here
</div>
<div class="col-md-8">
other stuff
</div>
<div class="col-md-2">
some more stuff
</div>
</div>
</div>
When I use dev tools on the pages, it seems like the columns are properly inheriting the bootstrap css, but they still aren't getting formatted.
Any ideas? Thanks in advance.
Related
After trying to upgrade my rails app from asset pipeline to the webpacker my modals will no longer pop up. I do not get any errors on initial load of the page or when I click on the modal button. However, if I run $('#edit').modal('show') in the console twice I get these errors:
$('#edit').modal('show')
bootstrap.esm.js:187 Uncaught TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element".
at bootstrap.esm.js:187
at Array.forEach (<anonymous>)
at typeCheckConfig (bootstrap.esm.js:181)
at Backdrop._getConfig (bootstrap.esm.js:2856)
at new Backdrop (bootstrap.esm.js:2792)
at Modal._initializeBackDrop (bootstrap.esm.js:3117)
at new Modal (bootstrap.esm.js:2974)
at HTMLDivElement.<anonymous> (bootstrap.esm.js:3359)
at Function.each (jquery.js:328)
at jQuery.fn.init.each (jquery.js:168)
(anonymous) # bootstrap.esm.js:187
typeCheckConfig # bootstrap.esm.js:181
_getConfig # bootstrap.esm.js:2856
Backdrop # bootstrap.esm.js:2792
_initializeBackDrop # bootstrap.esm.js:3117
Modal # bootstrap.esm.js:2974
(anonymous) # bootstrap.esm.js:3359
each # jquery.js:328
each # jquery.js:168
jQueryInterface # bootstrap.esm.js:3358
(anonymous) # VM58:1
$('#edit').modal('show') ## if I enter this again I get a different error
bootstrap.esm.js:3278 Uncaught TypeError: Cannot read property 'show' of undefined
at Modal._showBackdrop (bootstrap.esm.js:3278)
at Modal.show (bootstrap.esm.js:3030)
at HTMLDivElement.<anonymous> (bootstrap.esm.js:3369)
at Function.each (jquery.js:328)
at jQuery.fn.init.each (jquery.js:168)
at jQuery.fn.init.jQueryInterface [as modal] (bootstrap.esm.js:3358)
at <anonymous>:1:12
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '3.0.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.3', '>= 6.1.3.2'
# Use postgresql as the database for Active Record
gem 'pg', '~> 1.1'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# 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'
# Use jQuery as the JavaScript library
gem 'jquery-rails'
# bootstrap
gem 'bootstrap', '~> 4.5.2'
gem 'stripe', git: 'https://github.com/stripe/stripe-ruby'
# Adds Sendgrid
gem 'sendgrid-ruby'
# Adds Twilio
gem 'twilio-ruby', '~> 5.52.0'
# Adds Datatables
gem 'jquery-datatables'
# Dependency for boostrap datetimepicker
gem 'momentjs-rails', '>= 2.9.0'
# Adds DateTimePicker
gem 'bootstrap3-datetimepicker-rails', '~> 4.15.35'
# Adds input field masking
gem 'jquery_mask_rails', '~> 0.1.0'
# HTTP request gem
gem 'faraday'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false
group :development, :test do
# Debugging tools
gem 'pry'
# Testing framework
gem 'rspec-rails', '~> 5.0.0'
gem 'selenium-webdriver', '~> 3.142', '>= 3.142.7'
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 4.1.0'
# Display performance information such as SQL time and flame graphs for each request in your browser.
# Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
gem 'rack-mini-profiler', '~> 2.0'
gem 'listen', '~> 3.3'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
group :test do
# Testing frontend integration
gem 'capybara'
# Adds ability to open page during testing
gem 'launchy'
# Testing coverage
gem 'simplecov', require: false
# Disallow API calls during testing
gem 'webmock'
# Make inital API call and save as fixtures
gem 'vcr'
# Generate fixtures for testing
gem 'factory_bot_rails'
gem 'faker'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
app/javascripts/pack/application.rb
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "#rails/ujs"
import * as ActiveStorage from "#rails/activestorage"
import "channels"
import "datatables.net-bs4"
import "#fortawesome/fontawesome-free/css/all"
import "moment"
import "bootstrap"
import "datetimepicker"
import "jquery-mask-plugin"
Rails.start()
ActiveStorage.start()
global.$ = jQuery;
config/webpack/environment.rb
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.Tether': 'tether',
Popper: ['popper.js', 'default'],
ActionCable: 'actioncable',
})
)
module.exports = environment
View
<i class="fas fa-edit"></i>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="Edit" aria-hidden="true" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
Some form stuff
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<%= f.submit "Save", class: "btn btn-primary" %>
</div>
<% end %>
</div>
</div>
</div>
app/assets/stylesheets/application.scss
/* Load Bootstrap Libraries */
#import 'bootstrap';
/* Load Datatables */
#import "datatables";
/* Load Datetime picker */
#import 'bootstrap-datetimepicker';
Ben Trewern was right! I removed all my front-end gems from the Gemfile and added it to yarn and fixed the issue. Thanks.
I've tried all the methods outlined Here for getting google analytics up and running on my rails app.
I think that google is talking to my app because when I inspect the elements and look at the network I see the .js file.
I thought I might need to just sit and wait but this didn't work. I've now tried several ways to do this and nothing is working.
gemfile
source 'https://rubygems.org'
gem 'rails', '3.2.11'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
# For google analytics
gem 'google-analytics-rails', '1.0.0'
gem 'activeadmin'
gem 'pg'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
group :development do
gem 'pry'
end
gem 'rails_12factor'
gem 'delayed_job_active_record'
gem 'unicorn'
I have this line in my head tag at the bottom.
<%= analytics_init if Rails.env.production? %>
I thought this was the problem so I removed the if statement but that seemed like a bad idea as it would allow google to track any environment.It still didn't work after this...
What am I missing? I've never had this problem with analytics before. Any suggestions?
My guess is that you forgot to replace the placeholder within the analytics.js.coffee file.
#analyticsId: ->
# your google analytics ID(s) here...
'UA-XXXXXXX-XX'
I am unable to get bootstrap to work in my layout, I can't seem to figure out why. I did rm app/assets/stylesheets/application.css
Any help would be much appreciated.
Gemfile
source 'https://rubygems.org'
ruby '2.1.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0.beta2'
# Use postgresql as the database for Active Record
gem 'pg'
gem 'rails_12factor', group: :production
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0.0.beta1'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jQuery as the JavaScript library
gem 'jquery-rails', '~> 4.0.0.beta2'
# 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 'debugger' anywhere in the code to stop execution and get a debugger console
gem 'pry-rails'
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0.0.beta4'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
app/assets/stylesheets/custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>THE BLOGGER</title>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<nav>
<ul class="nav navbar-nav pull-right"></ul>
</nav>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
You should not remove the application.css manifest file. You should, however, change it's name to application.css.scss. This way it can be preprocessed by SASS.
If you are including the imports for bootstrap in a separate file as you do in your example (custom.css.scss), you must ensure that this file are included in the application manifest. The require_tree directive that is included by default does this (you need to have the file located in the /stylesheets directory, like you do):
#application.css or application.css.scss
*= require_tree .
However, since you are using SCSS, I recommend the following approach:
#application.css.scss
#...
#all your files and directives
#...
#import "bootstrap-sprockets";
#import "bootstrap";
This way, it is not necessary to have a separate file like custom.css.scss
Im making a Ruby on Rails app. I've included the twitter-bootstrap rails gem. Having tested the app locally, I've attempted numerous times to deploy to Heroku. I first encountered this 500 error:
ActionView::Template::Error (images/apple-touch-icon-144x144-precomposed.png isn't precompiled)
I solved this initial problem, by adding this line to the config/environment/production.rb file.
config.assets.compile = true
Now, I'm trying to push my rails app to Heroku again but when I push to Heroku I'm getting this 500 error again. I have no idea how to solve this one:
ActionView::Template::Error (undefined local variable or method `bootstrap_flash' for#<#
77: </div><!--/span-->
79: <%= bootstrap_flash %>
78: <div class="span9">
80: <%= yield %>
app/views/layouts/application.html.erb:79:in `_app_views_layouts_application_html_erb___2619453860724409461_34912060'
81: </div>
82: </div>
Any help would be greatly appreciated!
This is my Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.13'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'pg'
gem 'devise'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
gem "therubyracer"
gem "less-rails"
gem 'twitter-bootstrap-rails', :git => 'http://github.com/seyhunak/twitter-bootstrap-rails.git'
end
gem 'jquery-rails'
I've tried rake assets:precompile and then upload to Heroku but still, no luck.
You seems to be having this previously reported issue. Try adding the following gem:
gem 'bootstrap_helper'
You can also add this File, as one of your helpers. That's what fixed for most of the folks on that thread.
I am getting
cannot load such file -- bootstrap/sass
I have installed bootstrap-sass-2.0.3.1, sass-3.1.18, sass-rails-3.2.5, coffee-rails-3.2.2 and uglifier-1.2.4
Why would I be getting this error?
I was being a bit ahead of myself, appears I hadn't run gem install bootstrap-sass yet...
Oops.
put bootstrap-sass in the assets group of the Gemfile
group :assets do
gem 'sass-rails', '~> 3.2.5'
gem 'coffee-rails', '~> 3.2.2'
gem 'uglifier', '>= 1.2.4'
gem 'bootstrap-sass', '~> 2.0.3.1'
end