Skip to content
New issue

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

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed the position of the date picker when opened on the right side of the window/when it's appended to a container #186

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

fixed the position of the date picker when opened on the right side of the window/when it's appended to a container #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
99f6a96
fixed the position of the date picker when opened on the right side o…
swey Oct 13, 2016
37fad37
fixed the position of the date picker when it's appended to a container
swey Oct 13, 2016
56e5345
fixed the position calculation (removed the double substraction of pa…
swey Apr 25, 2017
7558cd3
fixed the position calculation (wether the datepicker should open abo…
swey Apr 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "foundation-datepicker",
"version": "1.5.4",
"version": "1.5.5",
"homepage": "https://github.com/najlepsiwebdesigner/foundation-datepicker",
"authors": [
"Peter Beňo <[email protected]>"
Expand Down
17 changes: 9 additions & 8 deletions js/foundation-datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

this.element = $(element);
this.autoShow = (options.autoShow == undefined ? true : options.autoShow);
this.appendTo = options.appendTo || 'body';
this.appendTo = $(options.appendTo || 'body');
this.closeButton = options.closeButton;
this.language = options.language || this.element.data('date-language') || "en";
this.language = this.language in dates ? this.language : this.language.split('-')[0]; //Check if "de-DE" style date is available, if not language should fallback to 2 letter code eg "de"
Expand Down Expand Up @@ -386,14 +386,15 @@
}).first().css('z-index')) + 10;
var textbox = this.component ? this.component : this.element;
var offset = textbox.offset();
var parentOffset = this.appendTo.offset();
var height = textbox.outerHeight() + parseInt(textbox.css('margin-top'));
var width = textbox.outerWidth() + parseInt(textbox.css('margin-left'));
var fullOffsetTop = offset.top + height;
var offsetLeft = offset.left;
var fullOffsetTop = offset.top + height - parentOffset.top;
var fullOffsetLeft = offset.left - parentOffset.left;
this.picker.removeClass('datepicker-top datepicker-bottom');
// if the datepicker is going to be below the window, show it on top of the input
if ((fullOffsetTop + this.picker.outerHeight()) >= $(window).scrollTop() + $(window).height()) {
fullOffsetTop = offset.top - this.picker.outerHeight();
if ((offset.top + height + this.picker.outerHeight()) >= $(window).scrollTop() + $(window).height()) {
fullOffsetTop = offset.top - this.picker.outerHeight() - parentOffset.top;
this.picker.addClass('datepicker-top');
}
else {
Expand All @@ -402,12 +403,12 @@

// if the datepicker is going to go past the right side of the window, we want
// to set the right position so the datepicker lines up with the textbox
if (offset.left + this.picker.width() >= $(window).width()) {
offsetLeft = (offset.left + width) - this.picker.width();
if (offset.left + this.picker.outerWidth() >= $(window).width()) {
fullOffsetLeft = (offset.left + width) - this.picker.outerWidth() - parentOffset.left;
}
this.picker.css({
top: fullOffsetTop,
left: offsetLeft,
left: fullOffsetLeft,
zIndex: zIndex
});
},
Expand Down
Loading