From 8aa8674e78aa02e869e0fb007637b5702d89cb99 Mon Sep 17 00:00:00 2001
From: Naomi Guyer <naomi@silverstripe.com>
Date: Thu, 23 May 2013 14:41:08 +1200
Subject: [PATCH] BUG: Treedropdowns broken inside togglecomposite fields
 (fixes #1945)

* Removed positioning javascript from treedropdownfield
* Set parent to be relatively positioned and overflow to visible
---
 css/TreeDropdownField.css       | 2 +-
 javascript/TreeDropdownField.js | 4 +---
 scss/TreeDropdownField.scss     | 3 ++-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/css/TreeDropdownField.css b/css/TreeDropdownField.css
index a402e2259..bda6fbbd9 100644
--- a/css/TreeDropdownField.css
+++ b/css/TreeDropdownField.css
@@ -1,4 +1,4 @@
-div.TreeDropdownField { width: 400px; background: #fff; border: 1px solid #aaa; cursor: pointer; overflow: hidden; }
+div.TreeDropdownField { width: 400px; background: #fff; border: 1px solid #aaa; cursor: pointer; overflow: visible; position: relative; }
 div.TreeDropdownField input { border: none; background: none; padding: 0; margin: 0; }
 div.TreeDropdownField .treedropdownfield-title { float: left; padding: 7px; width: 90%; line-height: 16px; overflow: hidden; outline: none; }
 div.TreeDropdownField .treedropdownfield-panel { clear: left; position: absolute; overflow: auto; display: none; cursor: default; border: 1px solid #aaa; border-top: none; margin: 1px 0 0 -1px; /* account for border on container div */ max-height: 200px; background-color: #fff; z-index: 50; -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); }
diff --git a/javascript/TreeDropdownField.js b/javascript/TreeDropdownField.js
index 055faca9b..f9d713118 100644
--- a/javascript/TreeDropdownField.js
+++ b/javascript/TreeDropdownField.js
@@ -58,9 +58,7 @@
 				$('body').bind('click', _clickTestFn);
 				
 				var panel = this.getPanel(), tree = this.find('.tree-holder');
-				var top = this.position().top + this.height();
-				
-				panel.css('top', top);
+
 				panel.css('width', this.width());
 				
 				panel.show();
diff --git a/scss/TreeDropdownField.scss b/scss/TreeDropdownField.scss
index 7d3b11e0b..05605f61f 100755
--- a/scss/TreeDropdownField.scss
+++ b/scss/TreeDropdownField.scss
@@ -3,7 +3,8 @@ div.TreeDropdownField {
 	background: #fff;
 	border: 1px solid #aaa;
 	cursor: pointer;
-	overflow: hidden;
+	overflow: visible;
+	position:relative;
 
 	input {
 		border: none;