I just implemented Trix editor in my rails app and it works perfectly on localhost but is pulling this ugly business on Heroku:
I can only imagine this is to do with the asset pipeline, so the basics are that I did install the gem (gem 'Trix') and did bundle install, I added //= require trix in my application.js and *= require trix in my application.css.scss. My assets precompiled upon pushing things to Heroku.
Here's the entire application.css.scss structure:
*= require magnific-popup
*= require trix
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import 'ionicons';
Other than these basics, can anyone figure out what step I'm missing to get the styling to appear on Heroku?
There is a style being applied to a class .form-control that is setting height on that box at 34px. Which is why it does not grow with the text
When I remove the height property that the box gets then the box expands out around the text again. This can be kind of hard to find and fix from my end but it is located in a file application.css file inside a block with the same styles that this is surrounded by, probably not line 5 though, probably a later line but depends on file size, search for height: 34px or just 34px again or something and look for a block of styles like the one in the image here and remove that line (now keep in mind if this line is used as a style somewhere else then that will break).
That should fix the issue.
If you are not familiar with using chrome (or any browsers) dev tools I would recommend finding any reference and getting comfortable with using them, they are perfect for debugging this kind of thing.
I have a rails app at 4.1.5. There are some score sheet pages which need printing and which need to printed at an exact font size and td border thickness (thin). I am using the bootstrap-sass gem.
I have just updated my code to bootstrap 3 and now find that bootstrap is interfering with my score sheet css. What is my best strategy?
Place my scoresheet css file in either lib/assets or vendor/assets. I have read that there is a descending load order with vendor/assets loaded last but can't confirm if that's true.
Put my score sheet css (or sass) into my bootstrap overrides css after the #import bootstrap directive.
Remove require_tree from my application.css and require each file explicitly in order. I understand require_tree will load files in random order.
None of the above?
require_tree will load alphabetically. You could prefix each file with a number, but that's not my recommendation.
You can explicitly require files, then follow that with a require_tree, which is a catch-all for the rest, which I recommend.
Regarding order, if you want to affect all sass variable based items such as font-size across the entire site:
declare values for matching variables (see bootstrap/variables.scss)
import bootstrap
require specifics, then catch-all with require_tree
Using Rails 3.2.1
I created a simple controller called Home using the command:
rails g controller Home index
And it created a new controller and view for me:
Notice how there are two stylesheets, one "Application" and one "Home". I can't find any documentation to support this assumption but I'm guessing you put styles that will only be applied to the "Home" views, in the Home.css.scss file, correct?
So as a test, I added in some global styles to Application.css.scss.erb and ran the application.
The styles applied as expected.
Next, I added in some rules to the Home.css.scss file and I visited a "Home/index" view, yet the style in that file wasn't attached, neither as a seperate CSS reference link, or even appended to the single Application.css.scss file. This is highly confusing to me, since the comments say:
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
Why aren't the rules written in Home.css.scss applied to my website?
It can work this way and Marek is quite correct, the answer is in the guide.
In the introduction to section 2.1:
For example, if you generate a ProjectsController, Rails will also add a new file at app/assets/javascripts/projects.js.coffee and another at app/assets/stylesheets/projects.css.scss. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.
So to set your application up to load controller specific stylesheets:
First, disable the default loading of all stylesheets by removing any extra requires in the application.css manifest.
Typically you'll see an entry like this:
*= require_tree .
If you still want to load some common css files, you can move them to a subdirectory and do something like this:
*= require_tree ./common
Second, In your application's layout add the suggested stylesheet_link_tag eg
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag params[:controller] %>
In this example we first load the application css file, we then load any css file that matches the current controller name.
I've solved this problem with a simple solution. I add to body the controller name as a class, editing views/layouts/application.html.slim:
body class=controller.controller_name
Or views/layouts/application.html.erb:
<body class="<%= controller.controller_name%>">
And then in my css I just use body.controller_name as a namespace:
/* example for /users/ */
body.users {
color: #000;
}
body.users a {
text-decoration: none;
}
For small projects I think it's fine.
I don't think it works that way (Home.css being applied only to Home controller actions). The different files are just for separation, to make it clearer what are the CSS rules describing. You can read this guide about the asset pipeline. I'm guessing you altered the default application.css.scss and removed the line importing all CSS files from app/assets/stylesheets.
TL;DR:
Ignore the comment, it's not made by Sass. But put:
#import "*";
into your application.css.scss file, and it will automatically import all the controller scss files.
Full read:
Disclaimer: This is my current understanding of the asset pipeline flow with and without Sass.
I think this comment is written by the standard Rails Asset pipeline (sprockets), and not by Sass:
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
The standard pipeline will handle scss files but doesn't presume an application.css.scss file. But if you create such a file with Sass, then Sass will compile it to the application.css file.
If you use the normal Rails asset pipeline, without Sass, then sprockets would load the css file into the application.css file automatically (if that file has the default *= require_tree . line in it).
When you use Sass, with an application.css.scss file, Sass will compile this file into a application.css file. (I assume it would overwrite or take precedence over any application.css file you already had).
To get your home.css.scss file (and other controller files) automatically included, put this line into your application.css.scss file:
#import "*";
For reference, see this question:
Is it possible to import a whole directory in sass using #import?
I'm using Ruby on Rails (Edge, the development version), and Ruby rvm 1.9.2.
application.js is as follows.
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree
Where is the right place in Ruby on Rails 3.1 to put the jQuery UI theme?
According to Autocomplete fields in Ruby on Rails 3.1 with jQuery UI I should put a jQuery UI theme in vendor/assets/stylesheets folder. That sounds like a smart place to have it, but I don't get it to work :-(.
I managed to get the CSS loaded by putting it in the assets/stylesheets folder, but the images I havn't managed to get loaded.
I could of course be using the old way with just putting the theme in the public/stylesheets/ folder, and using:
<%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.11.custom" %>
in application.html.erb, but trying to be a modern man, I would rather use the new way of doing tings :-).
Now that we have Ruby on Rails 3.1.0, this is what worked for me:
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
This directly includes the jQuery UI provided by the jquery-rails gem. But the gem does not provide the theme files. For these, I added a theme directory under vendor/assets/stylesheets, containing:
the jquery.ui.theme.css file,
the jQuery UI theme's images directory.
Be sure to keep the theme's images directory with the CSS file! Do not put the image files under vendor/assets/images, or they won't be found by jQuery (which search them under /assets/images).
Finally, changed the app/assets/stylesheets/application.css file to:
/*
*= require_tree ../../../vendor/assets/stylesheets
*= require_tree .
*/
Example of a working setup:
$ cat app/assets/javascripts/application.js
//= require jquery
//= require jquery-ui
$ cat app/assets/stylesheets/application.css
/*
*= require vendor
*
*/
$ cat vendor/assets/stylesheets/vendor.css
/*
*= require_tree ./jquery_ui
*
*/
vendor/assets/ $ tree
stylesheets
vendor.css
jquery_ui
jquery-ui-1.8.13.custom.css
...
images
jquery_ui
ui-bg_flat_0_aaaaaa_40x100.png
...
Finally run this command:
vendor/assets/images $ ln -s jquery_ui/ images
Enjoy your jQuery UI
I've fallen down to doing it the old way:
I put the jQuery folder, containing the theme (unchanged with both CSS and images folder) in the assets/stylesheets folder, and putting in: <%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %> in app/views/layouts/application.html.erb file. This solution is the one with less hazel when I will update jQuery later.
(Thanks for all suggestions on the solution. It is time to conclude.)
I like to selectively download jQuery UI JavaScript code so that I can easily upgrade to any future versions and have a light-weight jQuery UI (include needed files only, here progressbar.js).
I have the following setup for the "Dot Luv" jQuery UI theme.
Note:
The JavaScript and CSS files are uncompressed and taken from jquery-ui-1.8.16.custom/development-bundle/ui and jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv respectively, and I rely on sprokets to minify and compress them.
The images are from jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/images.
Directory Structure:
app/assets/javascripts/application.js
//= require jquery
//= require jquery-ui/v1.8.16/Core/jquery.ui.core
//= require jquery-ui/v1.8.16/Core/jquery.ui.widget
//= require jquery-ui/v1.8.16/Widgets/jquery.ui.progressbar
//= require jquery_ujs
app/assets/stylesheets/application.css.scss
*= require_self
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.all
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.base
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.core
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.progressbar
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.theme
config/application.rb
config.assets.paths << File.join(Rails.root,'vendor/assets/images/jquery-ui/v1.8.16/dot-luv/')
I know this thread already has a lot of answers but I'm going to throw in what worked best for me.
There is a gem called jquery-ui-themes that includes the default jQuery UI themes already converted to sass using the image-path helper. So you can include the gem and get any of the default themes out of the box just by adding them to your application.css file
If you want to use your own custom theme (as I did) there is a rake task that will automatically convert the CSS file to SCSS and use the image-path helper to find the right path.
With Ruby on Rails 3.1.2 I did the following.
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
For the CSS files, I like to do #import instead to have more control over the load order of CSS files. To do this, I have to add the .scss extension to the app/assets/stylesheets/application.css file, and also to all CSS files I want to import, like the jQuery UI CSS file.
#app/assets/stylesheets/application.css.scss
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*/
#import "jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss";
/* Other css files you want to import */
#import "layout.css.scss";
#import "home.css.scss";
#import "products.css.scss";
....
Then I put everything jQuery UI related in vendor/assets like this:
jQuery UI stylesheet:
vendor/assets/stylesheets/jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss
jQuery UI images folder:
vendor/assets/images/images
Note that you can create additional folder in the stylesheets path like I did here with "jquery-ui/ui-lightness" path. That way you can keep multiple jQuery themes nicely separated in their own folders.
** Restart your server to load any newly created load paths **
Ryan Bates has some excellent screencasts about the asset pipeline and Sass in Ruby on Rails 3.1, where he shows how to use the #import function in Sass. Watch it here:
#279 Understanding the Asset Pipeline
#268 Sass Basics
Edit: I forgot to mention that this works both locally and on Heroku on the Cedar stack.
There is now a jquery-ui-rails gem (see announcement). It packages the images as assets (and correctly references them from the CSS files) so things Just Work. :-)
So, here's one way to do it that lacks the downsides of some of the others mentioned here -- it doesn't require you to take apart the theme and put parts of it in different places, it doesn't require symbolic links, and it still allows you to compile the theme css into the one main css as part of the asset pipeline. It does not require a monkey patch like Nash Bridges' suggestion.
However, it does require an additional kind of hacky configuration line. (a one-liner though, basically).
Okay, put your theme in vendor/assets/jquery/ui-lightness/, like you wanted to. (will also work in lib/assets or app/assets, same way).
And
/* =require ui-lightness */
in your application.css. So far so good. Now to get the images to show up right, just add this to config/application.rb:
initializer :add_jquery_ui_asset_base, :group => :all, :after => :append_assets_path do
config.assets.paths.unshift Rails.root.join("vendor", "assets", "stylesheets", "jquery-ui", "ui-lightness").to_s
end
For me, it now works in dev, production, and other non-standard asset configs I could think of (like dev with debug=false, which trips up some of the other attempted solutions).
More info at http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/
Building on a number of other suggestions here, I found a solution that works in my dev environment and in production on Heroku.
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
app/assets/stylesheets/application.css
/*
*= require_self
*= require vendor
*= require_tree .
*/
vendor/assets/stylesheets/vendor.css
/*
*= require_self
*= require_tree .
*/
I added jquery-ui-1.8.16.custom.css and the associated images folder to vendor/assets/stylesheets (I found that unless the images folder was in the same folder as vendor.css it didn't work).
No other changes were necessary for this to work in the Heroku production environment.
Thanks to #denysonique, #softRli and #Paul Cook for their previous answers which helped me.
To get this to work on both my local dev environment and on Heroku, I did almost the same thing as denysonique suggested, but with a couple of differences at the end:
First, my directory structure looked like this:
vendor/assets/images/
jquery_ui/
images/
ui-bg_flat_0_aaaaaa_40x100.png
...
And second, my symbolic link was:
vendor/assets/images $ ln -s jquery_ui/images images
This is what finally worked for me.
There's a proposed fix in Ruby on Rails that makes precompilation of jQuery UI's images work.
(As of 3.1.0rc6, the asset precompiler uses the regular expression /\w+\.(?!js|css).+/ to find things to compile. This misses all the jQuery UI images because their names include dashes and underscores.)
Combining suggestions here is what got things working for me:
Put the jQuery UI theme CSS folder in vendor/assets/stylesheets.
Put vendor.css in vendor/assets/stylesheets:
*= require_tree ./theme-css-name
In production.rb I added this:
config.assets.paths << File.join(Rails.root,'vendor/assets/stylesheets/theme-css-name
That is what it took to get the images to get precompiled and resolve without editing the jQuery UI theme CSS file or moving the images out of the theme CSS folder.
I think you can put ui styles in app/assets/stylesheets. Do something like this:
# app/stylesheets/application.css.scss
//= require_self
//= require libraries/jquery-ui
//= require_tree .
In 'jquery-ui' stylsheet, something like this:
.class{
background: url(/assets/jquery-ui/ui-icons_222222_256x240.png)
}
What I did to get everything to work properly is as follows.
1.) Added the CSS to the assets/stylesheets folder
2.) Added the images to the assets/images folder
3.) Removed the paths to all the images in the CSS using find "url(images/" and replace with "" leaving just the image file name.
/* Example: */ .ui-icon { background-image: url(images/ui-icons_222222_256x240.png) ; }
/* Becomes: */ .ui-icon { background-image: url(ui-icons_222222_256x240.png) ; }
Bingo! Everything should work correctly.
Using Ruby on Rails 3.1.1, I simply placed the files as follows. No other changes were required.
app/assets/stylesheets/jquery-ui-1.8.16.custom.css
app/assets/images/ui-bg_highlight-soft_75_cccccc_1x100.png
...
What worked for me was instead of having the jQuery theme CSS file in app/assets/stylesheets/ and the images in app/assets/images/. I placed them into app/assets/images/images/, and it worked. It's kind of a hack, but it seems to work at this point with minimal fudging and without modifying the CSS files.
Get the CDN hosted theme from Google:
= stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css'
For that moment, I found not a perfect but working a solution.
Assuming you have jQuery UI theme in the /vendor/assets/stylesheets/ folder. Then you have to modify application.css:
/* =require ui-lightness */
and create plugin_assets_monkey_patch.rb in the /config/initializers
Dir[File.join(Rails.root, 'vendor/assets/stylesheets/*/')].each do |dir|
AppName::Application.config.assets.paths << dir
index_content = '/*=require_tree .*/'
index = File.join(dir, 'index.css')
unless File.exist?(index)
File.open(index, 'w') { |f| f.puts index_content }
end
end
index.css in every /vendor/assets/stylesheets/ subfolder guarantees that stylesheets like jquery-ui-1.8.11.custom.css will be compiled (if you require that subfolder).
config.assets.paths ensures that folders like /vendor/assets/stylesheets/ui-lightness/images are visible at the application root scope.