CSS Reference Lost in Some Cases

rubyonrails-talk
1

Firstly, sorry if this is a basic question - I'm pretty new to rails.

I've created a very basic rails application using the standard scaffold. I have two CSS files - one global (global.css) and one that is page specific (in this example, ammos.css). The global CSS has most of the CSS design and the local file has code for the UI element positioning on that page.

I have the following code in the head section of the application.html.erb file (under the "views" folder):

<head>   <title>Outpost Evolution</title>   <link rel="stylesheet" type="text/css" href="/stylesheets/global.css">   <%= yield :head %> </head>

Then I have the following code in the "_form.html.erb" file that was generated when I generated the scaffold.

<% content_for :head do %>   <link rel="stylesheet" type="text/css" href="/stylesheets/ammos_new.css"> <% end %>

The CSS settings show properly if I use the URL for the "/ammos/new" page directly in the browser. However, when I go to the "/ammos" page and then click the "New" link, the local CSS settings do not show up. The page behaves as if they do not exist.

Would anyone know why this occurs and how it can be avoided?

2

You should use the <%= stylesheet_link_tag 'filename' %> instead of including the <link tag directly. Rails will generate the stylesheet html for you

Thanks, Ganesh

3

Ganesh Ranganathan wrote in post #1137083:

4

Can you share the _form.html.erb code for head section

Does it not work on development or Production, or both?

5

Ganesh Ranganathan wrote in post #1137095:

Thanks Ganesh. I just tried that right now but the issue still persists.

Can you share the _form.html.erb code for head section

Does it not work on development or Production, or both?

It doesn't work in dev. I don't have a prod environment yet.

Here are the two options I have tried for the header code:

Option 1: <% content_for :head do %>   <link rel="stylesheet" type="text/css" href="/stylesheets/ammos_new.css"> <% end %>

Option 2 (this was based on your suggestion): <% content_for :head do %>   <%= stylesheet_link_tag '/stylesheets/ammos_new.css' %> <% end %>

6

Try

<% content_for :head do %>   <%= stylesheet_link_tag 'ammos_new' %> <% end %>

7

Ganesh Ranganathan wrote in post #1137105:

8

Have you looked at the html source of the page in the browser to see if it looks right?

Colin

9

Have you placed the css file in the app/assets/stylesheets folder?

10

Colin Law wrote in post #1137112:

Have you looked at the html source of the page in the browser to see if it looks right?

Colin

Yes, this is what I see (and it looks all right):

<link rel="stylesheet" type="text/css" href="/stylesheets/global.css"> <link rel="stylesheet" type="text/css" href="/stylesheets/ammos_new.css">

Ganesh Ranganathan wrote in post #1137113:

11

If you are using Rails 3.2 (?) and above, stylesheets need to be in app/assets/stylesheets folder.

12

+1 on Ganesh’s reply, but wondering why you are not simply using “<%= stylesheet_link_tag “application”, media: “all” %>”? That way all stylesheets are picked up as long as you have them in the app/assets/stylesheets folder. Simply remove the stylesheets you don’t want.

13

Thanks everyone. I moved the CSS file to app/assets/stylesheets and used the following syntax but it still did not fix the issue.

<%= stylesheet_link_tag 'ammos_new' %>

Is this a known/common issue?

14

Is it not working in development or production?

15

Have you tried using your browser’s inspector to check whether the stylesheets are loading correctly and what differences (if any) exist between your 2 cases? Does inspecting an element that should have one of these extra rules show that those rules have been overridden or that they are missing entirely?

Fred