In this blog I’m gonna show how to hide ui datepicker on scroll, as it stays visible when we scroll the page. Mainly it creates issue when we are using datepicker in the modal and modal’s height is bit more than the page in short the modal scrolls. While scrolling the modal we can notice that the datepicker is still visible and overlaps over other content. So, we can come over this issue using window.scroll.
The basic structure of our modal will look like this.
Modal Header
Some text in the modal.
And this is the our basic css and that’s for defined height modal.
.modal-body { min-height: 500px; max-height: 500px; overflow: auto; }
As we can see that there is a scrollbar over modal-body. So, here we will use window.scroll function over modal’s body.
$(".modal-body").scroll(function(){ $("#ui-datepicker-div").hide(); });
In this way we can hide our datepicker on scroll.
THANKS
More From Oodles
Ready to innovate? Let's get in touch
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.