Merge pull request #2589 from kinglozzer/2188-treedropdownfield-overflow

FIX: Allow TreeDropdownField to open upwards (fixes #2188)

admin/css/screen.css

@@ -182,6 +182,8 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
 .field .TreeDropdownField { padding: 0; }
 .field .TreeDropdownField .treedropdownfield-panel { border: 1px solid #b3b3b3; border-top: none; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
 .field .TreeDropdownField.treedropdownfield-open-tree { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; }
+.field .TreeDropdownField.treedropdownfield-with-rise { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; }
+.field .TreeDropdownField.treedropdownfield-with-rise .treedropdownfield-panel { border: 1px solid #b3b3b3; border-bottom: none; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; }
 .field .TreeDropdownField .badge { display: none; }
 .field .dropdown select { margin-top: 8px; }
 .field .chzn-container { max-width: 416px; }

admin/scss/_forms.scss

@@ -191,6 +191,21 @@ form.small .field, .field.small {
 			@include border-bottom-right-radius(0);
 		}
 
+		&.treedropdownfield-with-rise {
+			-webkit-border-radius: 0 0 4px 4px;
+			-moz-border-radius: 0 0 4px 4px;
+			border-radius: 0 0 4px 4px;
+
+			.treedropdownfield-panel {
+				border: 1px solid lighten($color-medium-separator, 20%);
+				border-bottom: none;
+
+				-webkit-border-radius: 4px 4px 0 0;
+			-moz-border-radius: 4px 4px 0 0;
+			border-radius: 4px 4px 0 0;
+			}
+		}
+
 		// Hide badges, as they cost too much horizontal space,
 		// and mess up rendering for selected node title
 		.badge {

javascript/TreeDropdownField.js

@@ -86,16 +86,45 @@
 					.removeClass('ui-icon-triangle-1-s')
 					.addClass('ui-icon-triangle-1-n');
 				
-				if(tree.is(':empty') && !panel.hasClass('loading')) this.loadTree();
+				if(tree.is(':empty') && !panel.hasClass('loading')) {
+					this.loadTree(null, this._riseUp);
+				} else {
+					this._riseUp();
+				}
+
 				this.trigger('panelshow');
 			},
+			_riseUp: function() {
+				var container = this,
+					dropdown = this.getPanel(),
+					toggle = this.find(".treedropdownfield-toggle-panel-link"),
+					offsetTop = toggle.innerHeight(),
+					elHeight,
+					elPos,
+					endOfWindow;
+
+				if (toggle.length > 0) {
+					endOfWindow = ($(window).height() + $(document).scrollTop()) - toggle.innerHeight();
+					elPos = toggle.offset().top;
+					elHeight = dropdown.innerHeight();
+					
+					// If the dropdown is too close to the bottom of the page, position it above the 'trigger'
+					if (elPos + elHeight > endOfWindow && elPos - elHeight > 0) {
+						container.addClass('treedropdownfield-with-rise');
+						offsetTop = -dropdown.outerHeight();
+					} else {
+						container.removeClass('treedropdownfield-with-rise');
+					}
+				}
+				dropdown.css({"top": offsetTop + "px"});
+			},
 			closePanel: function() {
 				jQuery('body').unbind('click', _clickTestFn);
 
 				// swap the up arrow with a down arrow
 				var toggle = this.find(".treedropdownfield-toggle-panel-link");
 				toggle.removeClass('treedropdownfield-open-tree');
-				this.removeClass('treedropdownfield-open-tree');
+				this.removeClass('treedropdownfield-open-tree treedropdownfield-with-rise');
 								
 				toggle.find("a")
 					.removeClass('ui-icon-triangle-1-n')