Menu
  • HOME
  • TAGS

Rails App: pipeline asset not working as expected

Tag: css,ruby-on-rails,ruby-on-rails-4,sass,asset-pipeline

I'm a ruby and rails novice so please have patience with me.

I have a SASS file (stats.css.scss) in rails that is loaded correctly in my development enviroment, but doesn't get loaded in my production enviroment. I know is the asset pipeline that is causing this, but have made several attempts and couldn't figure out what is wrong. Here's what I got:

In my site/app/assets/stylesheet folder I have the stats.css.scss file

The index.html.erb file is loading the SASS file like this:

<%= stylesheet_link_tag "stats", media: "all" %>

When I check the source code for the page loaded (Ctrl+U in google chrome) in development enviroment, I see this

<link href="/assets/stats.css?body=1" media="all" rel="stylesheet" />

which is what I expected, as it does look like the JS included in the asset pipeline. But in production enviroment the source code shows this

<link href="/stylesheets/stats.css" media="all" rel="stylesheet" />

Anybody can help me figure out what am I missing? Thanks!

Best How To :

Advice: don't compile assets in production. It's not necessary and prone to problems.


Since you haven't mentioned it, I'm going to guess you don't have stats.css added to the precompile config. Add the following to config/application.rb

config.assets.precompile += %w( stats.css )

The Rails Guide now suggests doing it like this in config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( stats.css )

Why is this necessary? From the guide:

The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files (this will include all image assets automatically) from app/assets folders including your gems:

[ Proc.new { |filename, path| path =~ /app\/assets/ && !%w(.js .css).include?(File.extname(filename)) }, /application.(css|js)$/ ]

In other words, if you want stats.css.scss to be precompiled at any point, you need to explicitly tell Sprockets to do so.

Detect when the jQuery UI slider is being moved?

jquery,html,css,jquery-ui

You can use 3-Events: - Start (Start-Sliding) -> Stop Player - End (End-Sliding) -> Start Player - Slide (Sliding) -> Move Player-Position $("#range").slider({ range: "min", start: function(event, ui) { player.pauseVideo(); }, stop: function(event, ui) { player.playVideo(); }, slide: function(event, ui) { player.seekTo(ui.value,true); return false; } }); Demo: http://codepen.io/anon/pen/EjwMGV...

styles css in embeded souncloud player

css,iframe,styles,embed,soundcloud

CSS you are writing on your CSS file wont effect content of iFrame. Solutions: Do you really need an iFrame? Cant it be done using modal window or something like that? Add CSS you want to add using JS/JQuery $('iframe').load( function() { $('iframe').contents().find("head") .append($("<style type='text/css'> .my-class{display:none;} </style>")); }); ...

change css dynamically by selecting dropdown list item

jquery,html,css,drop-down-menu

I have created a working example for you. You can find the jsfiddle in here This piece of code uses JQuery. (Remember, for these type of tasks, JQuery is your friend =] ). HTML <select id="dropDownMenu"> <option value="option1" selected="selected">yes</option> <option value="option2">no</option> </select> <br> <img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg"> Javascript function changeStyle(){...

Is it possible to have two callbacks in around_destroy in rails?

ruby-on-rails,activerecord,callback

It'll work without any issue, as Active Record wraps-up these callback methods in a single transaction. Since the object is destroyed in first yield, it seems the later is not feasible (assuming everything is running in one thread). How Rails handles this? No, object isn't destroyed in first yield. Object...

Render list starting from the bottom of its container

css

nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); padding: 0...

Select n elements from hover event

javascript,html,css

Use the immediate sibling selector (+) .item:hover + .item, .item:hover + .item + .item { background-color: green; } Example: http://codepen.io/anon/pen/jPGoYw...

CSS flexbox wraps content in FireFox (not Chrome)

css,google-chrome,firefox,flexbox,pseudo-element

Weird. button elements have some special behavior which seems to conflict with flexbox. Specifically, what happens is that the flex items are blockified, according to the spec: The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex...

Rails basic auth not working properly

ruby-on-rails,ruby,authentication

@user.keys.each do |key| username == key.api_id && password == key.api_key end This piece of code returns a value of .each, which is the collection it's called on (@user.keys in this case). As it is a truthy value, the check will pass always, regardless of what are the results of evaluating...

On rendering from controller, current_page method does not seem to work

ruby-on-rails,ruby,ruby-on-rails-4,model-view-controller

You can use content_for and yields to create a default in your layout which views can override. # layouts/application.html.erb: <% if content_for?(:banner) %> <%= yield(:banner) %> <% else %> <div id="banner"> <h1>This is the default...</h1> </div> <% end %> /users/signup.html.erb: <%- content_for :banner, flush: true do -%> <!-- move along,...

How to set DIV's width based on CSS indexes

html,css

If I understand this correctly,all you need to do is change your CSS to the following: .sintesi-offerta > .block:nth-child(3n+1) { width: 40%; } .sintesi-offerta > .block:nth-child(3n+2) { width: 20%; } .sintesi-offerta > .block:nth-child(3n+3) { width: 40%; } Side note: your br tags should be <br/> for jsfiddle to interpret them...

How To Check Value Of String

javascript,css,string,numeric

document.GetElementById("tombolco").style = "display:block"; That's not the right way. This is document.getElementById("tombolco").style.display = 'block'; Also note that it is getElementById, not with a capital G. Same with 'none',Rest of your code is fine. Fiddle...

How to reduce the size of picture on the background?

css

If you're trying to set fixed background image, this is example to scale and align your background image: .pic-wrap { display: block; height: 296px; background-image: url(https://pbs.twimg.com/profile_images/590966305248784384/1gX6-SY6_400x400.jpg); background-size: 256px; background-position: 20px 50%; background-repeat: no-repeat; padding-left: 296px; border: 1px solid #ddd; } @media only screen and (max-width: 320px) { .pic-wrap { background-size:...

Changing font-size of
  • on wordpress
  • css,wordpress,html-lists

    I think you have style inheritance from upper element, check it with dev. tools in browser. You can also try to set inline style for: <li style: "font-size: 22px;">Name 1</li> or add !important in your css file, like this: td > ul li { font-size: 22px !important;"> } ...

    Google map infowindow position on custom marker

    javascript,css,google-maps,google-maps-api-3

    Set the pixelOffset of the InfoWindow appropriately: From the documentation on InfoWindows pixelOffset | Type:Size | The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened with an anchor,...

    Showing and editing has_many objects in Rails

    ruby-on-rails,ruby-on-rails-4

    Since you need to support both (POST /milestones and POST /projects/:project_id/milestones) the project_id to the form: <%= form_for [@project,Milestone.new] do |f| %> ... <%= f.hidden_field(:project_id, value: @project_id) %> ... <%- end -%> Or if your resource is always nested than project_id available in the params in your controller so you...

    Dynamically resize side-by-side images with different dimensions to the same height

    javascript,html,css,image

    If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...

    Fancybox thumbnail is not working

    javascript,jquery,html,css,fancybox

    You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug. Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js Check this: JSFiddle, I forked your JSfiddle and edited the external sources. ...

    Rails: Posting from a form to a M:M table

    ruby-on-rails,activerecord

    As I said, you need to tweak your create action like this in order to save group_id. def create @group = Group.find(params[:group_id]) @discussion = current_user.discussions.build(discussion_params) @discussion.group_id = @group.id if @discussion.save flash[:success] = "Discussion started." redirect_to root_url end end OR You can add a hidden_field in your form_for to save group_id...

    Pure Css transition slide down panel not working

    html,css,css3

    Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...

    Make instance variable accessible through hash in Ruby

    ruby-on-rails,ruby,ruby-on-rails-4,activerecord

    It's not "through Hash", it's "array access" operator. To implement it, you need to define methods: def [](*keys) # Define here end def []=(*keys, value) # Define here end Of course, if you won't be using multiple keys to access an element, you're fine with using just key instead of...

    Text-decoration/CSS causing text to move

    html,css,wordpress

    This is normal behaviour: Bold text is wider, thus repositioning the centered text around it. You could go for a fixed width on all links to prevent this: .main-navigation a { text-decoration: none; min-width: 6em; display: inline-block; } ...

    HTML CSS Two 2-column tables side by side with same height and width

    html,css

    Okay so I have made a few assumptions to create this solution. Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be). Secondly, these tables are not floated. This...

    Div with the form of a pencil [duplicate]

    html,css,css-shapes

    .pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...

    Ruby on Rails - Help Adding Badges to Application

    ruby-on-rails,ruby,rest,activerecord,one-to-many

    Take a look at merit gem. Even if you want to develop your own badge system from scratch this gem contains plenty of nice solutions you can use. https://github.com/merit-gem/merit

    How to send a mail by postfix mail server with rails?

    ruby-on-rails,email,mailer

    You need to change the delivery_method from :smtp to :sendmail config.action_mailer.delivery_method = :sendmail ...

    ActiveAdmin ::Show 4 textbox in active admin using has_many relationship

    ruby-on-rails,gem,activeadmin

    Add the following to your Polls Controller- def new @poll = Poll.new 4.times do @poll.answers.build end end ...

    How to make background body overlay when use twitter-bootstrap popover?

    html,css,twitter-bootstrap

    Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...

    Ruby: How to copy the multidimensional array in new array?

    ruby-on-rails,arrays,ruby,multidimensional-array

    dup does not create a deep copy, it copies only the outermost object. From that docs: Produces a shallow copy of obj—the instance variables of obj are copied, but not the objects they reference. dup copies the tainted state of obj. If you are not sure how deep your object...

    How to pass array in rails 4 strong parameters

    ruby-on-rails,arrays

    According to the docs https://github.com/rails/strong_parameters#permitted-scalar-values: The permitted scalar types are String, Symbol, NilClass, Numeric, TrueClass, FalseClass, Date, Time, DateTime, StringIO, IO, ActionDispatch::Http::UploadedFile and Rack::Test::UploadedFile. To declare that the value in params must be an array of permitted scalar values map the key to an empty array: params.permit(:id => []) If...

    change icon on collapse in Bootstrap 2.3 not in bootstrap 3

    javascript,jquery,css,html5,twitter-bootstrap

    Updated. Yes - the first pure CSS solution was not satisfactory. If you dare to add some javascript, you can do this : $('.accordion-group').on('show', function() { $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up'); }); $('.accordion-group').on('hide', function() { $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down'); }); It is using the bootstrap collapse hide / show events directly on the collapse sections. Still without...

    Default scrollbar position

    javascript,jquery,html,css,scroll

    Here you go: http://jsfiddle.net/vtep7Lf1/ $("document").ready(function() { $("#ccwindow").animate({ scrollTop: $("#ccwindow").height() }, "slow"); return false; }); ...

    Adding horizontal space between 2 buttons using javascript

    javascript,jquery,html,css

    Use CSS instead of Javascript. Anyway, you're adding a class to all buttons. Use following code: .submitButton { margin: 0 10px; } ...

    How do I specify a css margin-top for foundation row div?

    css,zurb-foundation

    Use: div.row { margin-top: 12px; } or .row { margin-top: 12px !important; } ...

    What is Rack::Utils.multipart_part_limit within Rails and what function does it perform?

    ruby-on-rails,ruby,rack,multipart

    Telling it short, this value limits the amount of simultaneously opened files for multipart requests. To understand better what is multipart, you can see this question. The reason for this limitation is an ability to better adjust your app for your server. If you have too many files opened at...

    Button not center align in Safari

    html,css,safari,center-align

    if you don't set a width for btn: parent - text-align: center use for button - display-inline: block; instead display: block .wrap { text-align: center; } .center-block { display: inline-block; } <div class="wrap"> <input value="Button" class="center-block" type="submit" /> </div> ...

    Active Record association links, but can't assign values

    ruby-on-rails

    Your column should be permission_id, not permissions_id. That is why AR doesn't find the related model.

    CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

    html,css,css3

    table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...

    CSS :hover that shows more than one image

    html,css,css3

    Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...

    add value to existing class in jQuery

    javascript,jquery,html,css

    Use attr() like $(document).ready(function() { $('.project-open').hide(); $('.hackandfly, .scanergy, .connecting-food').click(function() { $slidah = $($(this).attr('class')+'-open'); $slidah.slideToggle(); $('div.project-open').not($slidah).slideUp(); }); }); However, the above will fail if you have multiple classes. A workaround would be to add data-* to the clicked elements like <div class="hackandfly other-class" data-class-target="hackandfly-open"></div> and then $(document).ready(function() { $('.project-open').hide();...

    tag in HAML

    html,css,haml

    HAML equivalent is %i{class:"fa fa-search"} You can look at http://codepen.io/anon/pen/BNwbEP and see the compiled view ...

    Can Rails deal with DB uniqueness without index?

    mysql,ruby-on-rails,rdbms

    Because there is no need for other ways. Under the hood it's all the same: when you define a UNIQUE constraint, a UNIQUE index is created on that table to enforce it. Question from DBA.SE: When should I use a unique constraint instead of a unique index? So for a...

    show div only when printing

    javascript,html,css

    You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...

    bootstrap - dynamically changing jumbotron background image

    javascript,jquery,html,css,bootstrap

    You have some syntax errors otherwise everything is good!! keep url inside quotes as below: $('.jumbotron').css('background-image','url(/path/to/new/image)'); ...

    How to find a record from database by using find_by with two fields?

    ruby-on-rails

    If you're using Rails 4 you can do: @user = User.find_by(first_name: "John", last_name: "Doe") If rails 3: @user = User.find_by_first_name_and_last_name("John", "Doe")...

    Website showing differently in windows xp and mobile

    html,css

    The background colour changes when the browser width is less than 1200px wide. You have specified the background-color for the selector .td-grid-wrap within a media query: What you need to do is move the background-color property to the non-media-queried selector .td-grid-wrap or perhaps .td-page-wrap. ...

    Top header 100% of screen, but body only 70%?

    html,css

    Put your header inside the body. And don't apply styles to the body but use a container. + You should have one single header in your page. <body> <header> <nav><ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Solutions & Services</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Networking</a></li> <li><a href="#">Website</a></li> <li><a href="#">Home...

    Centering navbar pills vertically within the navbar using flexbox

    html,css,twitter-bootstrap,flexbox

    Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li...

    Rails shared controller actions

    ruby-on-rails,ruby,ruby-on-rails-4

    You should pass actions to the included block and perform_search_on to the class_methods block. module Searchable extend ActiveSupport::Concern class_methods do def perform_search_on(klass, associations = {}) ............. end end included do def filter respond_to do |format| format.json { render 'api/search/filters.json' } end end end end When your Searchable module include a...

    Iframe does not show scrollbar

    html,css,angularjs,iframe,ionic

    You have hidden scrollbars in ionic.app.css: ::-webkit-scrollbar { display: none; } I don't know if it is possible to override this style so probably you have to remove it. Similar question....

    How to remove all the borders of a selectbox?

    jquery,html,css,drop-down-menu

    Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon...