Can't get CSS to load - ruby-on-rails

I can't seem to get a css file to apply its styling to a form. It is quite frustrating now because as far as I know it should work!
In my head I have
<link href="/stylesheets/formtastic.css?1290524609" media="screen" rel="stylesheet" type="text/css" />
and in the body I have:
<form action="/agents" class="formtastic agent" id="new_agent" method="post">
The formtastic.css file should apply styling to the form. It's contents are viewable here:
formtastic.css
Any suggestions or fixes?

The problem was that the following code was not inserted in the form:
<% f.inputs do %>
This creates the html and now the css works.
i.e. the html missing was

dont you need to turn that number into a querysting var?
<link href="/stylesheets/formtastic.css?math=1290524609" media="screen" rel="stylesheet" type="text/css" />

Are you using this with Rails? If so, you could simply put this in your header:
<%= formtastic_stylesheet_link_tag %>
Also, have you run both bundle install and rails generate formtastic:install (for Rails 3, use ./script/generate formtastic for Rails 2)?

Are you sure the path is correct? if you check source with firebug check the link tag and see if its contents are a 404 error. It may be an issue with your root-relative path.
This is only a guess as I can't see how your site is structured.

Are you sure you have to begin with a forward slash ? (/)
Cause it's mean it's at the root of your domain.
Tried <link href="stylesheets/formtastic.css?1290524609" media="screen" rel="stylesheet" type="text/css" /> ?

Related

Devise Views Not Getting Styled in Rails

I have been working on an application for the Rhode Island State Police. I decided to use the devise gem to handle user auth. After running rails generate devise user. I went to the /sign_up page, and found that it was all there, but just as html. For an example of my problem check out my app
http://systemsgroup2.herokuapp.com/
http://systemsgroup2.herokuapp.com/users/sign_in
Thanks for the help.
Your stylesheets are referenced relative to the current path.
In your layouts (or where ever you include your stylesheets) change the paths from
<link rel="stylesheet" href="assets/skel.css" />
<link rel="stylesheet" href="assets/style.css" />
<link rel="stylesheet" href="assets/style-wide.css" />
to
<link rel="stylesheet" href="/assets/skel.css" />
<link rel="stylesheet" href="/assets/style.css" />
<link rel="stylesheet" href="/assets/style-wide.css" />
Your stylesheets are not loading for the /user directory because instead of looking for assets/stylesheets it is looking for assets/users/stylesheets. To fix this you can use Rails stylesheet helper instead of manually linking to the stylesheets:
<%= stylesheet_link_tag "application" %>

ASP.NET MVC: how to append a token to CSS URL properly?

I can append a token to my script references like this:
<script type="text/javascript" src="/Some.js?<%= Html.GetToken() %>"></script>
... and this works fine. But, if I try to append the same token the same way to a CSS file reference:
<link rel="stylesheet" type="text/css" href="/Some.css?<%= Html.GetToken() %>" />
... the IIS generates the following markup:
<link rel="stylesheet" type="text/css" href="/Some.css?<%= Html.GetToken() %>" />
I know I'm missing something super simple but I cannot see what exactly. Thanks in advance for any help!
This happens if your <head> section has runat="server". If you can live without it (in ASP.NET MVC you usually can) try it this way.
If not, add or modify the CSS link in your view's Page_Load. If that sounds awful to you, then removing runat="server" should be working :)
There a trick you can use for auto versioning.
Check out the post here:
Auto-versioning in ASP.NET MVC for CSS / JS Files?

wicked_pdf does not include styles

I used
<%= wicked_pdf_stylesheet_link_tag "pdf" %>
it shows the following output in the html
<link href="/stylesheets/pdf.css?1302860585" media="screen" rel="stylesheet" type="text/css">
<link href="file:///home/likewise-open/NEXTBRIDGE/nazar.hussain/osd/development/atlantis/public/stylesheets/pdf" media="screen" rel="stylesheet" type="text/css">
But when create the pdf it do not have any style. If i copy all css from the file to the header of the page, it includes all styles. What is the issue and how to solve it.
I personally haven't had any trouble with this method, but I've seen others that have.
I just pushed some updates to the main project that should resolve this issue for you.
wicked_pdf_stylesheet_link_tag now will inline any css files passed in directly into the markup.
I also updated the Github issue you created.

How to handle relative paths in ASP.NET MVC?

I have a master page which references a style in the following manner:
<link rel="stylesheet" type="text/css" href="../../Content/Style.css" />
All my pages inherit from this master page. And this works well when the URL is http://www.domain.com/home/details/5, however the URL is http://www.domain.com/home/create, then, of course, Style.css cannot be found because `../../Content/Style.css' resolves to a directory one higher where there is nothing there.
How is this typically handled?
Use Url.Content("~/Content/Style.css") to resolve the path safely.
"~" means the host.
e.g.
<link rel="stylesheet" type="text/css"
href="<%= Url.Content("~/Content/Style.css") %>" />

Problem with stylesheet_link_tag

I have add stylesheet link tag to my application. I'm sure its worked. because in another place is working. but if I run at my computer it did not working. I mean my application cant load css
when I seen at view source the result is :
<script src="http://localhost:3000//javascripts/application.js?1258048544" type="text/javascript"></script>
<link href="http://localhost:3000//stylesheets/jquery.autocomplete.css?1258048544" media="screen" rel="stylesheet" type="text/css" />
I'm sure it shouldnt appear double slash // after domain or localhost:3000. weird why in other computer it was worked.
Have you any suggestion for this case? how to change double slash with single?
btw I use ubuntu.
The Rails helpers should not render an absolute url, it should simply be a relative path.
<link href="/stylesheets/jquery.autocomplete.css?1250281505" media="screen" rel="stylesheet" type="text/css" />
Make sure you are using the stylesheet_link_tag properly - do not use a leading slash or the trailing .css when specifying the stylesheet name. Same for javascript_include_tag.
<%= stylesheet_link_tag "jquery.autocomplete" %>
Maybe this helps:
Relative paths from root-stucture: "/your/path/to/file.ext"
Relative paths from the current file "your/path/to/file.ext"
Try these helper methods:
<%= stylesheet_link_merged 'jquery.autocomplete.css' %>
<%= javascript_include_tag 'application.js'%>
*Works with http://synthesis.sbecker.net/pages/asset_packager
I had a similar problem and just discovered the issue–it may or may not work for you.
My app uses the Facebooker gem to integrate with Facebook Connect. In my facebooker.yml file, if I had a trailing slash in my callback_url setting, I would get the same behavior as you described. Removing the trailing slash fixed the issue.

Resources