Browse files

Datepicker appears above component used to open it if there is not en…

…ough space at the bottom of the screen for it to be fully visible.
  • Loading branch information...
1 parent 5f3d1a3 commit 86c2873a8348b70d0b8704d98f64cb9128f15ac8 Daniel Gibbons committed Feb 27, 2013
Showing with 28 additions and 6 deletions.
  1. +18 −5 css/datepicker.css
  2. +10 −1 js/bootstrap-datepicker.js
View
23 css/datepicker.css
@@ -36,22 +36,35 @@
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
- border-bottom: 7px solid #ccc;
- border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
- top: -7px;
left: 6px;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
- border-bottom: 6px solid #ffffff;
position: absolute;
- top: -6px;
left: 7px;
}
+.arrowTop:before {
+ border-bottom: 7px solid #ccc;
+ top: -7px;
+ border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+.arrowTop:after {
+ top: -6px;
+ border-bottom: 6px solid #ffffff;
+}
+.arrowBottom:before {
+ border-top: 7px solid #ccc;
+ bottom: -7px;
+ border-top-color: rgba(0, 0, 0, 0.2);
+}
+.arrowBottom:after {
+ bottom: -6px;
+ border-top: 6px solid #ffffff;
+}
.datepicker > div {
display: none;
}
View
11 js/bootstrap-datepicker.js
@@ -335,8 +335,17 @@
}).first().css('z-index'))+10;
var offset = this.component ? this.component.parent().offset() : this.element.offset();
var height = this.component ? this.component.outerHeight(true) : this.element.outerHeight(true);
+
+ if (offset.top+this.height+this.picker.outerHeight() <= window.innerHeight) {
+ var pickerTop = offset.top + this.height;
+ $(this.picker).removeClass('arrowBottom').addClass('arrowTop');
+ } else {
+ pickerTop = offset.top - this.picker.outerHeight();
+ $(this.picker).removeClass('arrowTop').addClass('arrowBottom');
+ }
+
this.picker.css({
- top: offset.top + height,
+ top: pickerTop,
left: offset.left,
zIndex: zIndex
});

2 comments on commit 86c2873

@schettino72

A simpler option is to just scroll the element into view

        this.element[0].scrollIntoView();
@gibbonsd1
Owner

This would be an improvement to the current calculation of the datepicker location. However, with the current release, when the datepicker is clicked, it appears below the button that was clicked along with an arrow pointing up towards the button. If you move the datepicker above the button, you must also move the arrow to the bottom of the datepicker and change it so that it points down instead of up. That is the additional logic included in this commit.

Please sign in to comment.