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.
Related
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 have a rails 5 app with webpacker. I am trying to use webpack to both bundle my css files and my js files.
In my javascripts/packs, I have both an application.js and application.scss files. I added bootstrap as dependencies to my package.json and am now trying to import both bootstrap css and js into my rails app. in application.js I have :
console.log('Hello World from Webpacker')
import 'jquery'
import 'bootstrap/dist/js/bootstrap';
In application.scss I have :
#import '~bootstrap/dist/css/bootstrap';
I cant figure out how to import both scss and js at the same time. In application.html.erb I have both
<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>
However it's ever the js or the css that is loaded but never both !
I guess there's a problem in the way webpack is configured but I cant figure it out. How do I configure webpack correctly to work with my rails 5 app and bundle both my css and js correctly.
Here's a link to the project :
https://github.com/davidgeismar/Visitors
For loading webpacker stylesheet to your Rails application first you should remove app/javascript/packs/application.scss file. Because webpacker separate the stylesheet code with same js file name with stylesheet extensions.
Example - Your webpacker main js file is - app/javascript/packs/application.js and you should import all css and js files inside. So you don't need keep app/javascript/packs/application.scss file, but webpacker generate an application.css file from extracting the code from application.js.
Here's the modified code from your rails app github repo. First remove the app/javascript/packs/application.scss
#app/javascript/packs/application.js
console.log('Hello World from Webpacker')
import 'jquery'
import 'bootstrap/dist/js/bootstrap';
//import 'bootstrap/dist/css/bootstrap.css';
// Added js code for checking webpacker is working fine or not.
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#content-from-webpacker').innerHTML = '<p class="h1">h1. Bootstrap heading</p><h1 class="display-1">Display 1</h1>'
})
Here's view code for loading webpacker.
#app/views/layout/application.html.erb
<body>
<%= render 'shared/navbar' %>
<%= yield %>
<!-- This id(content-from-webpacker) is used for displaying content from webpacker -->
<div id="content-from-webpacker"></div>
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
<%= javascript_include_tag 'application' %>
</body>
I hope it should work. Also I made this changes to your github repo and send a pull request.
I have installed components-font-awesome with bower for my rails application.
I successfully include the sass files,
#import "components-font-awesome/scss/fa-brands";
#import "components-font-awesome/scss/fontawesome";
Then when I am trying to add an icon to my page
<i class="fab fa-facebook-f" style="font-size: 48px;"></i>
it's not been displayed.
I am tracing the element on console and looks good.
It has a font-family:
Font Awesome 5 Brands';
and the right before content
content: "\f39e";
But still it's not displayed.
Include the class fa. It looks like you have used fab.
<i class="fa fa-facebook-f" style="font-size: 48px;"></i>
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
I have a running Angular-app in my ruby on rails project and now I want to implement some typeahead search using angular.js and can not find the solution how to make typeahead directive running.
Question: How to install angular typeahead directive into my project ?
With present solution described bellow I am getting this console :
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/template/typeahead/typeahead.html
ng-app is working and related js and css files linked into html as well.
I am following this source: bootstrap-ui-angularjs
What I did already :
downloaded angular-ui-bootstrap.js into
public\assets\javascripts directory
manifested asset pipeline as usually:
//= require jquery
//= require jquery_ujs
//= require jquery.tokeninput
//= require bootstrap
//= require angular
//= require angular-ui-bootstrap
//= require_tree .
3.checked if js are on the page:(just scripts in question)
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/angular.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-ui-bootstrap.js?body=1" type="text/javascript"></script>
my ng-app:
<div ng-app='plunker'>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{result | json}}</pre>
<input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
</div>
</div>
<script>
angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope, $http, limitToFilter) {
//http://www.geobytes.com/free-ajax-cities-jsonp-api.htm
$scope.cities = function(cityName) {
return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q="+cityName).then(function(response){
return limitToFilter(response.data, 15);
});
};
}
</script>
Is there something what I am missing in connection to installing existing angular directives? e.g. from this link
Instead of using ui-bootstrap.js, you can use ui-bootstrap-tpls.js. This js file comes with the templates.
To use ui-bootstrap-tpls.js you have to add js file to your html:
<script src="/scripts/angular-ui/ui-bootstrap-tpls.js"></script>
AND in your module you have to add these dependencies:
angular.module('myModule', ['ui.bootstrap', 'ui.bootstrap.typeahead']);
If you do these 2 steps you won't get this message anymore:
Failed to load resource: the server responded with a status of 404
(Not Found) _http://localhost:3000/template/typeahead/typeahead.html
What happens often is that people only add the js file and forget to add the dependency to the module.
The GitHub code also contains a folder called template, inside which there is a template folder for typeahead. Have you downloaded that and added to your project at the correct location.
The error seems to be coming due to this typeahead template html file missing. In case it has been added check if location is correct.
You can add the templates to your web page if the ui-bootstrap-tpls.js file doesn't work or if you want to use the ui-bootstrap.js file:
<script type="text/ng-template" id="template/typeahead/typeahead-popup.html">
<ul class="dropdown-menu" ng-if="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
<li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}">
<div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
</li>
</ul>
</script>
<script type="text/ng-template" id="template/typeahead/typeahead-match.html">
<a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
</script>
Make sure to include the correct .js file which contains the templates.
I replaced "ui-bootstrap.min.js" with "ui-bootstrap-tpls.min.js"
This fixed it for me. Also see What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?
Solution:
create a new folder public\template\typeahead
download typeahead.html from this source into directory created in step 1.