Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Datepicker location changes when using jquery 1.8.3 #40

helphop opened this Issue Dec 20, 2012 · 15 comments


None yet
3 participants

helphop commented Dec 20, 2012

When I use jquery 1.8.3 the datepicker calender appears at the top of the screen. If I switch back to 1.7.2 it works fine.

I have updated my datepicker gem and it still exhibits the above behavior.

Any help appreciated.


Nerian commented Dec 23, 2012

Hi Mitchell,

Can't reproduce. Can you give a minimal code example?


helphop commented Dec 24, 2012

When I code the page to load jquery 1.7.2 the calender works. When I load
the latest JQuery from google sites the calendar loads in a different

So it works perfectly with 1.7.2. I can get you a code example but I'm
using as per instructed on the site.
I will get you the code I am using

On Sun, Dec 23, 2012 at 5:26 PM, Gonzalo Rodríguez-Baltanás Díaz <
notifications@github.com> wrote:

Hi Mitchell,

Can't reproduce. Can you give a minimal code example?


Reply to this email directly or view it on GitHubhttps://github.com/Nerian/bootstrap-datepicker-rails/issues/40#issuecomment-11645378.

I also have this issue


Nerian commented Dec 26, 2012

There is an test app[1] that is using the last version of this gem, and jQuery 1.8.3. It works as expected.

So an example of failing code would be very useful.

[1] https://github.com/Nerian/bootstrap-datepicker-rails/tree/master/testapp

i notice this changes based on where i put the include in my application.css

*= require_self
*= require_tree . 
*= require bootstrap-datepicker

makes it stick to top
but if i use the following, it floats awkwardly in a lower region of the page

*= require_self
*= require bootstrap-datepicker
*= require_tree . 


*= require bootstrap-datepicker
*= require_self
*= require_tree . 

Nerian commented Dec 26, 2012

So there is a css rule in either the application.css file itself or in any other of the files in your asset/stylesheets folder that is overwriting some datepicker styling.

Let's find out. Assuming you are using Chrome, you can open the web inspector and inspect the css applied to any element. Inspect the datepicker and take a look and the styles that are being applied to it. There must be something that is not coming from the datepicker own styles.

heres a pastebin with all the CSS info copy pasted from the inspector;
update (correct one):


Nerian commented Dec 27, 2012

Interesting. There is no overwriting of the official styles, so that wasn't the issue.

What I see is in fact the opposite. Check this:
Captura de pantalla 2012-12-27 a la s 21 00 04

The datepicker location is by default on [ top:0; left: 0 ]. This then gets overwritten by Datepicker by applying an inline css rule [ top: 121; left: 0 ] to it.

In your case, that is not happening.

I wonder if you are using jQuery UI's Datepicker too? that could cause a conflict.

Let's take a look at the javascript that you are using to initialise the Datepicker.

these are my requires for javascript

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
//= require best_in_place
//= require bootstrap-datepicker
//= require_tree .

Nerian commented Dec 27, 2012

But how are you initializing the Datepicker?

Do you have a line like this? $('.datepicker').datepicker()

note that i have two date pickers on this page

    <input placeholder='From Date' name='from_date' value='<%= @from_date %>' class='datepicker input-small' type="text" data-behaviour='datepicker' >
    <input placeholder='To Date' value='<%= @to_date %>' name='to_date' class='datepicker input-small' type="text" data-behaviour='datepicker' >
    <script type="text/javascript">
        "format": "yyyy-mm-dd",
        "weekStart": 1,
        "autoclose": true

Nerian commented Jan 1, 2013

That code looks fine. I am not sure what could be causing you issue. Maybe the awesome Andrew Rowls would know what else could we check.

@eternicode This gentleman have some problems with bootstrap-datepicker and jQuery 1.8.3. The Datepicker appears at the top left of the screen. Nonetheless, this problem does not appear when he is using jQuery 1.7.2.

Does this sound familiar to you?

@Nerian Nerian closed this Jan 1, 2013

@Nerian Nerian reopened this Jan 1, 2013

helphop commented Feb 13, 2013

I'm still waiting for a fix anyone have anything?


Nerian commented Feb 13, 2013

I can't reproduce this error.

Try to reproduce it here:

@Nerian Nerian closed this May 5, 2013


Nerian commented May 14, 2014

Thanks for sharing 👍

El 14/05/2014, a las 17:10, Brandon Hall notifications@github.com escribió:

For future reference, I believe the issue here is related to jQuery 1.8 and the change from 1.7 to 1.8 that made outerHeight() and outerWidth() return objects instead of values.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment