JavaScript assets do load properly, but CSS don't

[jmuheim]

More infos here:

http://stackoverflow.com/questions/12121571/bootstrap-datepicker-rails-javascript-assets-properly-loaded-but-css-not

Update:

It seems the problem isn't that the CSS is not loaded, but that the datepicker's generated HTML does not have some needed classes, like ".datepicker".

Here's the generated code:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 282.5px; left: 575.5px; z-index: 1; "><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1345895877573.datepicker._adjustDate('#dp1345895877575', -1, 'M');" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_1345895877573.datepicker._adjustDate('#dp1345895877575', +1, 'M');" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">August</span>&nbsp;<span class="ui-datepicker-year">2012</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th><span title="Monday">Mo</span></th><th><span title="Tuesday">Tu</span></th><th><span title="Wednesday">We</span></th><th><span title="Thursday">Th</span></th><th><span title="Friday">Fr</span></th><th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">1</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">2</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">3</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">4</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">5</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">6</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">7</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">8</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">9</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">10</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">11</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">12</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">13</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">14</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">15</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">16</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">17</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">18</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">19</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">20</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">21</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">22</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">23</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">24</a></td><td class=" ui-datepicker-week-end ui-datepicker-days-cell-over  ui-datepicker-today" onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default ui-state-highlight ui-state-hover" href="#">25</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">26</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">27</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">28</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">29</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">30</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">31</a></td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td></tr></tbody></table></div>

[Nerian]

Hi Joshua,

This is how the HTML of this datepicker looks like:

<div class="datepicker dropdown-menu" style="display: none; top: 50px; left: 40px; z-index: 10; "><div class="datepicker-days" style="display: block; "><table class=" table-condensed"><thead><tr><th class="prev" style="visibility: visible; "><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">August 2012</th><th class="next" style="visibility: visible; "><i class="icon-arrow-right"></i></th></tr><tr><th class="dow">Mo</th><th class="dow">Tu</th><th class="dow">We</th><th class="dow">Th</th><th class="dow">Fr</th><th class="dow">Sa</th><th class="dow">Su</th></tr></thead><tbody><tr><td class="day old">30</td><td class="day old">31</td><td class="day">1</td><td class="day">2</td><td class="day">3</td><td class="day">4</td><td class="day">5</td></tr><tr><td class="day">6</td><td class="day">7</td><td class="day">8</td><td class="day">9</td><td class="day">10</td><td class="day">11</td><td class="day">12</td></tr><tr><td class="day">13</td><td class="day">14</td><td class="day">15</td><td class="day">16</td><td class="day">17</td><td class="day">18</td><td class="day">19</td></tr><tr><td class="day">20</td><td class="day">21</td><td class="day">22</td><td class="day">23</td><td class="day">24</td><td class="day active">25</td><td class="day">26</td></tr><tr><td class="day">27</td><td class="day">28</td><td class="day">29</td><td class="day">30</td><td class="day">31</td><td class="day new">1</td><td class="day new">2</td></tr><tr><td class="day new">3</td><td class="day new">4</td><td class="day new">5</td><td class="day new">6</td><td class="day new">7</td><td class="day new">8</td><td class="day new">9</td></tr></tbody></table></div><div class="datepicker-months" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev" style="visibility: visible; "><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2012</th><th class="next" style="visibility: visible; "><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7"><span class="month">Jan</span><span class="month">Feb</span><span class="month">Mar</span><span class="month">Apr</span><span class="month">May</span><span class="month">Jun</span><span class="month">Jul</span><span class="month active">Aug</span><span class="month">Sep</span><span class="month">Oct</span><span class="month">Nov</span><span class="month">Dec</span></td></tr></tbody></table></div><div class="datepicker-years" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev" style="visibility: visible; "><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2010-2019</th><th class="next" style="visibility: visible; "><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7"><span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year active">2012</span><span class="year">2013</span><span class="year">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span><span class="year">2018</span><span class="year">2019</span><span class="year old">2020</span></td></tr></tbody></table></div></div>

Your looks like jQuery UI's one. My guess is that you are using jQuery UI and that is loaded after you load this datepicker.

[jmuheim]

I'm using jquery-rails gem and rails3-jquery-autocomplete gem. Here's the relevant part of my Gemfile:

gem 'simple_form'
gem 'slim'
gem 'jquery-rails'
gem 'rails3-jquery-autocomplete' # jQuery autocomplete

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platforms => :ruby

  gem 'uglifier', '>= 1.0.3'
  gem 'twitter-bootstrap-rails'
  gem 'kickstrap_rails'
  gem 'bootstrap-datepicker-rails'
  gem 'bootstrap-timepicker-rails'
end

I'm not really sure how I could make sure that this datepicker is loaded after jQuery UI.

[Nerian]

Show me the manifest files for the assets pipeline.

app/assets/javascripts/application.js

[jmuheim]

You were right, jQuery was loaded after in there! I corrected it and now it works, thank you! :) Have a nice weekend.

[Nerian]

Excellent. Have a nice week-end too