发表新帖
发表新帖

jQuery ui datepicker positioning problem when scrolling down webpage

前端 未结
关注
10 1168
野的像风
野的像风 2021-01-02 11:30

I have a webpage that uses multiple instances of the jQuery ui datepicker. My webpage will display ~80 records which extends beyond a single screenshot.

<
相关标签:
10条回答
  • 说谎
    2021-01-02 11:49

    Hey here is one hack which can we be used to solve this issue.

    $(".ui-datepicker-trigger").on("click", function() {
var self;
if ($.browser.msie) {
self = $(this);
$("#ui-datepicker-div").hide();
setTimeout(function(){
$("#ui-datepicker-div").css({
top: self.offset().top + $('html').scrollTop() + 30
});
$("#ui-datepicker-div").show();
}, 0); 
}
});

    Give a try it worked for me :)

    0 讨论(0)
  • 清酒与你
    2021-01-02 11:50

    I had the same problem too, I'm using IE9 but instead to use document.documentElement.scrollTop I edit the follwing line on my JS code

    $.datepicker._pos[1] += input.offsetHeight + document.body.scrollTop;

    This is because document.documentElement.scrollTop returns 0, for me the above code solves my problem

    0 讨论(0)
  • 情歌与酒
    2021-01-02 11:54

    I have come across the same issue on an app I am working on and found a solution. The application did not contain a proper doc-type specification and all that was needed was to add it to the top of the page.

    <!DOCTYPE html>

    Hope this helps.

    0 讨论(0)
  • 执念已碎
    2021-01-02 11:55

    I was having these issues as well in IE 9 and cannot thank you enough for your collective help. Chrome 22.0.1229.94 m and FF 15.0.1 did not exhibit this issue for me.

    I first tried forcing IE 8 emulation with a meta tag 

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

    to no avail.

    I then edited the jquery.ui.datepicker.js file as suggested to adjust position height by accounting for scrolling. This did not work either.

    Finally I changed my doctype from 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    to

    <!DOCTYPE html>

    which worked successfully!!

    I removed the meta tag that forced IE 8 emulation, but kept the changes I made to the datepicker js file. My success could be a combination of the edited js and the change in doctype, or just the change in doctype.

    0 讨论(0)
  • 陌清茗
    2021-01-02 11:58

    I'm not sure if this would be the problem, but you're attaching the datepicker in a non-standard way. You don't need to iterate with .each();

    $("input.date-pick").datepicker({
    dateFormat: 'dd M yy',
    showOn: 'button',
    buttonImage: '/Images/datepickericon.png',
    buttonImageOnly: true
});

    Also, you should always put a tag name in front of a class selector whenever possible, as it speeds up the selection process.

    0 讨论(0)
  • 迷失自我
    2021-01-02 11:59

    first go to here and format your js file in Javascript Beautifier

    then go to line no 445

    k = k + document.body.scrollTop;
change this line as 
k = k ;
    0 讨论(0)
 看不清?
提交回复
热议问题