I am using the following gems:
gem 'therubyracer', platforms: :ruby
#gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"
and in asset pipeline this is the code
*
*= require_bootstrap_and_overrides
*= require_self
*= require_tree .
*/
and in bootstrap_and overrides file this is the code
#import "twitter/bootstrap/bootstrap";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
//#import "fontawesome/font-awesome";
// Glyphicons
#import "twitter/bootstrap/glyphicons.less";
// 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/customize.html#variables for their names and documentation
//
// Example:
// #link-color: #ff0000;
#import url(http://fonts.googleapis.com/css?family=Capriola);
and when i use the class <i class="fa fa-user"></i> like this glyphicon is showing. But for the class <i class="glyphicon glyphicon-user"></i
the glyphicon is not displaying the proper image.
Bootstrap is not being included in your asset pipeline correctly, try this workaround by importing from the CDN source instead of loading from an asset file:
Add this to the head section of your application.html.erb file in your views/layout folder:
FontAwesome icons:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Glyphicon icons, which are packaged with the bootstrap minified CDN:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
I would strongly suggest you to switch to https://github.com/twbs/bootstrap-sass and follow the guide there
Related
Although running bootstrap with rails is working fine, the JS functionality isn't working for me. For example, I can't collapse navbar, but I can run $() in my browser console.
My /app/javascript/packs/application.js looks like this:
// 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.
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap-sprockets')
require('popper.js')
require('turbolinks')
// As instructed in https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails
//= require bootstrap-sprockets
// But the above is not working
My /app/assets/stylesheets/application.scss looks like this:
#import "bootstrap" ;
body {
margin: 0 ;
}
In my routes.rb, I have root to: 'pages#home'. The home.html.erb looks like this:
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<main role="main" class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Cover template for Bootstrap, by #mdo.</p>
</div>
</footer>
</div>
When I run the server, and visit the home page, an error is showing up on the browser's console:
Error: Cannot find module 'bootstrap-sprockets'
My gem file has these entries for jquery, bootstap:
gem 'jquery-rails', '~> 4.3', '>= 4.3.5'
gem "bootstrap", "~> 4.4"
gem 'bootstrap-sass'
I can't use features like navbar collapse in bootstrap. What's wrong?
I had same problems with collapse not working, and latest version of jQuery and bootstrap.
Had to change to:
"bootstrap": "^4.4.1",
"jquery": "3.4.1"
But this was with rails 6.0.1, so using ujs. Check those versions.
I'm using wickedpdf to try to generate a nice looking pdf report. When using show_as_html: true to make sure everything looks right, the page looks great, it uses the correct template, and all content is loaded as they should. There are no reference errors or asset errors, those were corrected by creating a wickedpdf specific scss and js (see below):
However, when I set it up to disposition: 'attachment' for it to actually generate the pdf, it looks nothing like the page above and the result is a pdf that lacks formatting and with disjointed components across multiple pages. The graphs are also not rendering and show no data. It seems like it's not applying the correct bootstrap/custom css and it's not running the javascript files needed to create the layout as shown on the html view. Any ideas why this is happening? My understanding is using show_as_html: true would render the exact same page as it would look in the pdf and then creating the pdf would use those exact contents to create the pdf document. I've looked at all other wicked-pdf questions but I haven't found anything that helps.
Below is the current setup in the controller:
format.pdf do
render pdf: "#{#interest.name}",
template: "interests/pdf_export.html.erb",
layout: 'pdf.html', disposition: 'attachment',
title: "#{#interest.name}",
#default_header: true,
#default_footer: true,
header: { spacing: 10,
html: {
content: "interests/report_header",
layout: 'pdf.html', # optional, use 'pdf_plain' for a pdf_plain.html.pdf.erb file, defaults to main layout
}
},
viewport_size: '1280x1024',
#show_as_html: true,
javascript_delay: 10000,
enable_plugins: true,
page_size: 'A4'
end
Here is the pdf layout:
<!DOCTYPE html>
<html>
<head>
<title>PDF</title>
<%= wicked_pdf_stylesheet_link_tag 'wickedpdf' %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JAVASCRIPT DEPENDENCIES ---->
<!-- jquery -->
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- popper -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- bootstrap -->
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.19.0/feather.js"></script>
<%= wicked_pdf_javascript_include_tag 'wickedpdf'%>
</head>
<body>
<div class='container'>
<%= yield %>
</div>
</body>
</html>
wickedpdf.scss:
#import 'stack/bootstrap';
#import 'stack/fonts/flag-icon-css/css/flag-icon';
#import 'stack/vendors/extensions/pace';
#import 'stack/vendors/extensions/unslider';
#import 'stack/plugins/extensions/noui-slider';
#import "stack/bootstrap-extended";
#import "stack/colors";
#import "wickedpdf/components";
#import 'stack/core/menu/menu-types/vertical-menu';
#import 'stack/core/colors/palette-gradient';
#import 'style';
wickedpdf.js:
//= require stack/vendors/vendors.min
//= require stack/vendors/charts/raphael-min
//= require stack/vendors/charts/chart.min
//= require stack/vendors/charts/jquery.sparkline.min
//= require stack/vendors/extensions/unslider-min
//= require stack/vendors/extensions/wNumb
//= require stack/vendors/extensions/nouislider.min
//= require stack/vendors/extensions/jquery.steps.min
//= require stack/vendors/timeline/horizontal-timeline
//= require stack/vendors/tables/datatable/datatables.min
//= require stack/core/app-menu
//= require stack/core/app
//= require stack/scripts/pages/dashboard-ecommerce
//= require_tree ./common
//= stub ./common/subscriptions
My understanding is using show_as_html: true would render the exact same page as it would look in the pdf
This is a misunderstanding. I'm sorry it may have seemed that way from whatever documentation you read, but show_as_html: true will display the HTML that will be sent to wkhtmltopdf, however wkhtmltopdf is like a very old version of Chrome (around version 13, I think). It doesn't support flexbox and a lot of nice things like that, which I think newer versions of Bootstrap need. Probably some of your JS libraries, too.
That option is there to help you more rapidly develop and debug. It's a lot tougher to view-source on a PDF.
My advice would be to strip away all CSS and JS first, and try and get the most important part working (the charts), then implement the layout with tables or floats or fixed-width containers, then copy over the bits of CSS you need specifically for the styles shown on the page, and not all of Bootstrap.
If this is a page that does double duty (both format.html and format.pdf versions are served), I would suggest breaking the PDF out into it's own separate template, so HTML visitors still get the beautiful interactive webpage.
I thought I followed the directions, but maybe I missed something?
Gemfile:
gem 'foundation-rails'
ran bundle
ran rails g foundation:install
This added and made changes to:
views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*/
assets/stylesheets/foundation_and_overrides.scss
// -- snip --
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-visibility-classes: $include-html-classes;
// $include-accessibility-classes: true;
// $include-table-visibility-classes: true;
// $include-legacy-visibility-classes: true;
#import 'foundation';
assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){ $(document).foundation(); });
I have successfully seen buttons display correctly, but other things just refuse to display as expected. The first thing I looked at was the grid example, so i copied and pasted the source, but it didn't shade as the example. The spacing seems correct...
Then I tried accordian. I copied and pasted from the source code of the examples. It displayed the list bullets but didn't expand/contract.
Then I tried the top bar. I copied and pasted from the source code of the examples. It put a horizontal bar at the top, but the menu items are not inline.
Then I tried making a brand new rails project just to test foundation. I followed the same steps, and got the same results. (mumbles something about insanity...)
I've used foundation before, but apparently I'm missing something important.
$ rvm list
rvm rubies
=* ruby-2.2.1 [ x86_64 ]
# => - current
# =* - current && default
# * - default
$ rails -v
Rails 4.2.4
foundation-rails gem currently loads foundation 5, while the website has examples for foundation 6. It would appear that they are NOT compatible ;)
To test, see the documentation for foundation 5
I am using the theme grasyscale-sass, mainly in one of the links of the project and ALL it works fine, and other links use its own SCSS file. In this scss file I want to change certain bootstrap variables as navbar-default-bg, etc, but to include two scss files (application.scss and my custom.scss file) with stylesheet_link_tag in the file application.html.erb I can't get the changes I've made to these variables in custom.scss, I think always the default values apply, however the normal code CSS is modified.
Any clue what I'm doing wrong? Or am I trying to do something "forbidden"?
Thanks in advance.
/**************/
Here application.html.erb file and how the two scss files are included, both in assets/stylesheets
<%= stylesheet_link_tag 'application', 'custom', media: 'all', 'data-turbolinks-track' => true %>
custom.scss file
$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg:#ffffff; /* Navbar default */
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
i{
color: #337ab7;
}
a{
color: #cb2027;
}
#import "bootstrap";
#import "bootstrap-sprockets";
.center {
text-align: center;
}
.navbar-brand{
font-size: 2em;
font-weight: bold;
}
...
and application.js file, included in assets/javascripts
//
//= require_self
//= require jquery
//= require jquery_ujs
//= require jquery.easing
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
// require.js
//= require grayscale
//= require masonry/jquery.masonry
// require_tree .
Import Bootstrap styles in app/assets/stylesheets/application.scss
#import "bootstrap"; and #import "bootstrap-sprockets"; go inside application.scss along with any other stylesheets.
Without going into how you can/should setup your directories for stylesheets, variables/mixins, etc. Your variables need to come before bootstrap in application.scss and your other customization's after:
Since you're using a theme that all ready has variables used to customize the base bootstrap styles, you'll have to change those Grayscale variables and/or styles in order to change them to what you want.
*In this example _variables = grayscale_variables from the theme and main.scss is basically application.scss.
application.scss
#import "grayscale_variables";
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
#import "_grayscale";
#import "style";
grayscale_variables.scss
$grayscale-primary: #cb2027;
$grayscale-dark: #e9e9e9;
$grayscale-light: #cb2027;
$grayscale-body-font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif;
$grayscale-headline-font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
(*and only one bootstrap js should be used) see bootstrap-sass bootstrap-sprockets and bootstrap should not both be included in application.js
My application.scss, but remain unimplemented some variables, for example $body-bg, $navbar-default-bg and so, I think uses main.css of grayscale-sass theme.
I also tried changing the order of some #import
$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9;
$body-bg: #fff;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg: #f8f8f8;
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
#import 'masonry/transitions';
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'custom';
#import '../../../grayscale-sass/asset/sass/main.scss';
I'm having an issue with deploying a customized _variables.scss to my production server as a compiled asset.
Everything is fine on my development environment, it's in production that my variables are being overwritten.
I'm using Rails 4.2.1 with Spree 3.0 Stable branch.
I have the following structure:
Files created in vendor/assets/stylesheets/frontend
_variables.scss (my custom app variables)
all.css (generated by Spree)
frontend_bootstrap.css.scss (override Spree)
navbar.scss (my customization)
The _variables.scss contains the following:
// Place all Sass variables here.
// Colors
$brand-primary: green;
$gray: #aaa;
// Navbar
$navbar-default-bg: #fff;
$navbar-height: 100px;
$navbar-border-radius: 0;
$navbar-default-border: none;
$navbar-default-toggle-hover-bg: $navbar-default-bg;
$navbar-default-toggle-icon-bar-bg: lighten($gray, 60%);
$navbar-default-toggle-border-color: $navbar-default-bg;
$navbar-default-link-active-bg: $brand-primary;
The frontend_boostrap.css.scss contains the following:
// Spree Bootstrap Override
// Core
#import "variables";
#import "bootstrap-sprockets";
#import "bootstrap";
// Custom Overrides
#import "navbar";
The navbar.scss contains the following:
// Navbar Customization
.navbar-myapp {
margin-bottom: 40px;
border-top: none;
border-bottom: 1px solid $navbar-default-toggle-icon-bar-bg;
.navbar-brand {
padding: 15px;
}
}
The Rails standard app/assets/stylesheets/application.css manifest isn't being used/I haven't declared anything specfic in there.
The produced HTML head code shows all.css and frontend.
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/all.self-33fc4a513acb9a5f3fd4ba26b89c94184e5d028c4bd40eee6736d3ccfea5c140.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/frontend_bootstrap.self-88eb7ced3e4d78d298a33264c3cfc65af6cef8ac32ae56a7dd7a3e321ba97378.css?body=1">
All is well in development but when I deploy this to my test server, some of the variables are being overwritten by the default, this includes the navbar configuration and a color.
I'm not sure if this is because of asset compilation order; or if it's how bootstrap-sass is imported.
Any suggestion on how I can go about using _variables.scss without it being overwritten? I didn't want any duplication, that's why I wanted to change the navbar and colors in the the variables sass file.
It looks like I've solved the issue.
The Bootstrap Sass gem states:
Do not use //= require in Sass or your other stylesheets will not be
able to access the Bootstrap mixins or variables.
To get this working in Production / compiled assets. I had to:
Change all.css to all.scss
Change the //= require statements to #import
The vendor/assets/stylesheets/spree/frontend/all.scss:
// Sass Application Manifest
#import "frontend_bootstrap";
The vendor/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss:
// Spree Bootstrap Override
// Core
#import "bootstrap-sprockets";
#import "variables";
#import "bootstrap";
I hope this helps anyone who stumbled like I did.