Error on loading CSS using Ruby on Rails

Question

I'm doing my first small test Project using ruby on rails and I'm getting na error when trying to load css into my page. My view has a small form to save events on Google Calendar, the code is shown below.

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<div id="content">

  <h1>SAVE AN EVENT</h1>

  <form action="/google_calendar/create" method="post" onsubmit="return validate_dates()" >
    <fieldset>
      <label for="title">Title:</label><input type="text" name="title" id="title" class="textbox" />
      <label for="begindate">Begin Date:</label><input type="date" name="begindate" id="begindate" class="time" />
      <label for="beginhour">Begin Hour:</label><input type="time" name="beginhour"  id="beginhour" class="time" />
      <label for="enddate">End Date:</label><input type="date" name="enddate" id="enddate" class="time" />
      <label for="endhour">End Hour:</label><input type="time" name="endhour" id="endhour" class="time" />
      <label for="location">Location:</label><input type="text" name="location" id="location" class="textbox" size="31" class="textbox" />
      <label for="description">Description:</label><textarea rows="10" cols="25" name="description" id="description" class="textbox"></textarea>
      <input type="Submit" value="Save"  class="button"/>
    </fieldset>
  </form>
  <span id="result_message">
  <%= @result_message %>
  </span>
</div>

In my application.css I have the following styles. I know I could put them in a diferente file, but since this is just a small test I left there. The file has the following code.

 /*
 *= require_tree .
 *= require_self
 */

body, div, h1, form, fieldset, input, textarea {
    margin: 0; padding: 0; border: 0; outline: none;
}

html {
    height: 100%;
}

body {
    background: #728eaa;
    background: -moz-linear-gradient(top, #25303C 0%, #728EAA 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25303C), color-stop(100%,#728EAA)); /* webkit */
    font-family: sans-serif;
}

#content {
    width: 430px; margin: 60px auto; padding: 60px 30px;
    background: #c9d0de; border: 1px solid #e1e1e1;
    -moz-box-shadow: 0px 0px 8px #444;
    -webkit-box-shadow: 0px 0px 8px #444;
}

h1 {
    font-size: 35px; color: #445668; text-transform: uppercase;
    text-align: center; margin: 0 0 35px 0; text-shadow: 0px 1px 0px #f2f2f2;
}

label {
    float: left; clear: left; margin: 11px 20px 0 0; width: 95px;
    text-align: right; font-size: 16px; color: #445668;
    text-transform: uppercase; text-shadow: 0px 1px 0px #f2f2f2;
}

span {
    float: left; clear: left; margin: 11px 20px 0 0;
    text-align: right; font-size: 16px; color: #445668;
    text-shadow: 0px 1px 0px #f2f2f2;
}

input {
    width: 260px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
    background: #5E768D;
    background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    -moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
    font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-shadow: 0px -1px 0px #334f71;
}
input::-webkit-input-placeholder  {
    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
input:-moz-placeholder {
    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}

textarea {
    width: 260px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0;
    background: #5E768D;
    background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    -moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
    font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;
}
textarea::-webkit-input-placeholder  {
    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
textarea:-moz-placeholder {
    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}

input:focus, textarea:focus {
    background: #728eaa;
    background: -moz-linear-gradient(top, #668099 0%, #728eaa 20%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#668099), color-stop(20%,#728eaa)); /* webkit */
}

input[type=submit] {
    width: 185px; height: 52px; float: right; padding: 10px 15px; margin: 0 15px 0 0;
    -moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
    border: 1px solid #556f8c;
    background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79)); /* webkit */
    cursor: pointer;
}

The thing is that when I'm trying to access the form I'm getting this error:

Showing C:/Sites/RubyOnRailsCalendar/app/views/welcome/index.html.erb where line #1 raised: 
TypeError: The object doesn't support this property or method (translated from my native language)

Does anyone know why this is happening?

EDIT: I added the following line to my application.html.erb but it's still failing.

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

The complete file is shown below.

<!DOCTYPE html>
<html>
<head>
  <title>RubyOnRailsCalendar</title>
  <%= stylesheet_link_tag    'default', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

EDIT: Gemfile added

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.6'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'google_calendar', '~> 0.5.1'

gem 'openssl'

in `application.html.erb` you have to load all your styles next string `<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>` — Igor Ivancha, Apr 11 '16 at 21:53
No. I only have the application.css file and imported it in the view. — Andre, Apr 11 '16 at 22:07
just remove `<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %>` — Igor Ivancha, Apr 11 '16 at 22:08
It still didn't work. I also tried removing the include from the view and only using it on application.html.erb and it's giving me the same error on this file. Do you know if I need a specific gem for this? — Andre, Apr 11 '16 at 22:21
Another thing I've tried was creating a default.css file and add the styles there, but the same error occurs. — Andre, Apr 13 '16 at 13:38
Yes, you're right, I forgot to mention that. I used RailsInstaller. — Andre, Apr 13 '16 at 15:46
I've heard about issues of developing in windows, but all what I can help you is googling, because I use ubuntu. — Igor Ivancha, Apr 13 '16 at 20:04
[first post](http://stackoverflow.com/questions/28312460/object-doesnt-support-this-property-or-method-rails-windows-64bit) || [second post](http://stackoverflow.com/questions/28421547/rails-execjsprogramerror-in-pageshome) || [third post](http://stackoverflow.com/questions/28241981/rails-4-execjsprogramerror-in-pageswelcome) — Igor Ivancha, Apr 13 '16 at 20:06

Error on loading CSS using Ruby on Rails

0 Answers0