diff --git a/css/TreeDropdownField.css b/css/TreeDropdownField.css
index 0282526a8..24296c04f 100644
--- a/css/TreeDropdownField.css
+++ b/css/TreeDropdownField.css
@@ -13,14 +13,14 @@ div.TreeDropdownField {
 		margin: 0;
 	}
 	
-	div.TreeDropdownField .title {
+	div.TreeDropdownField .treedropdownfield-title {
 		float: left;
 		padding: 7px;
 		line-height: 16px;
 		overflow:hidden;
 	}
 
-	div.TreeDropdownField .panel {
+	div.TreeDropdownField .treedropdownfield-panel {
 		clear: left;
 		position: absolute;
 		overflow: auto;
@@ -37,14 +37,14 @@ div.TreeDropdownField {
 		-o-box-shadow     : 0 4px 5px rgba(0,0,0,.15);
 		box-shadow        : 0 4px 5px rgba(0,0,0,.15);
 	}
-		div.TreeDropdownField .panel ul.tree {
+		div.TreeDropdownField .treedropdownfield-panel ul.tree {
 			margin: 0;
 		}
-			div.TreeDropdownField .panel ul.tree a {
+			div.TreeDropdownField .treedropdownfield-panel ul.tree a {
 				font-size: 12px;
 			}
 		
-	div.TreeDropdownField .toggle-panel-link {
+	div.TreeDropdownField .treedropdownfield-toggle-panel-link {
 		border: none;
 		margin: 0;
 		z-index: 0;
@@ -64,15 +64,16 @@ div.TreeDropdownField {
 		background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
 		background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
 		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
+		
 		background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
 		border-left: 1px solid #aaa;
 	}
-		div.TreeDropdownField .toggle-panel-link.open-tree {
+		div.TreeDropdownField .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree {
 			background: transparent;
 			border: none;
 		}
 		
-		div.TreeDropdownField .toggle-panel-link a {
+		div.TreeDropdownField .treedropdownfield-toggle-panel-link a {
 			text-decoration: none;
 			display: block;
 			border: 0;
diff --git a/javascript/TreeDropdownField.js b/javascript/TreeDropdownField.js
index 3b80b0960..9dcbd0144 100644
--- a/javascript/TreeDropdownField.js
+++ b/javascript/TreeDropdownField.js
@@ -26,13 +26,13 @@
 		$('.TreeDropdownField').entwine({
 			onmatch: function() {		
 				this.append(
-					'<span class="title"></span>' +
-					'<div class="toggle-panel-link"	><a href="#" class="ui-icon ui-icon-triangle-1-s"></a></div>' +
-					'<div class="panel"><div class="tree-holder"></div></div>'
+					'<span class="treedropdownfield-title"></span>' +
+					'<div class="treedropdownfield-toggle-panel-link"><a href="#" class="ui-icon ui-icon-triangle-1-s"></a></div>' +
+					'<div class="treedropdownfield-panel"><div class="tree-holder"></div></div>'
 				);
 			
 				var linkTitle = strings.openLink;
-				if(linkTitle) this.find("toggle-panel-link a").attr('title', linkTitle);
+				if(linkTitle) this.find("treedropdownfield-toggle-panel-link a").attr('title', linkTitle);
 				
 				if(this.data('title')) this.setTitle(this.data('title'));
 				
@@ -40,36 +40,56 @@
 				this._super();
 			},
 			getPanel: function() {
-				return this.find('.panel');
+				return this.find('.treedropdownfield-panel');
 			},
 			openPanel: function() {
+				// close all other panels
+				$('.TreeDropdownField').closePanel();
+				
 				var panel = this.getPanel(), tree = this.find('.tree-holder');
 				
-				// set the panel to the bottom of the field
-				panel.css('top', this.position().top + this.height());
+				// set the panel to the bottom of the field. Takes into account the
+				// mouse scroll position.
+				// @todo - support for opening above content
+				var scrollTop = 0;
+				
+				this.parents().each(function(i, e) {
+					if($(e).scrollTop() > 0) {
+						scrollTop = $(e).scrollTop();
+						return;
+					}
+				});
+
+				var top = this.position().top + this.height() + scrollTop;
+				
+				panel.css('top', top);
 				panel.css('width', this.width());
 				
 				panel.show();
 				
 				// swap the down arrow with an up arrow
-				var toggle = this.find(".toggle-panel-link");
-				toggle.addClass('open-tree');
+				var toggle = this.find(".treedropdownfield-toggle-panel-link");
+				toggle.addClass('treedropdownfield-open-tree');
+				this.addClass("treedropdownfield-open-tree");
 				
 				toggle.find("a")
 					.removeClass('ui-icon-triangle-1-s')
 					.addClass('ui-icon-triangle-1-n');
 				
 				if(tree.is(':empty')) this.loadTree();
+				
 			},
 			closePanel: function() {
 				// swap the up arrow with a down arrow
-				var toggle = this.find(".toggle-panel-link");
-				toggle.removeClass('open-tree');
-				
+				var toggle = this.find(".treedropdownfield-toggle-panel-link");
+				toggle.removeClass('treedropdownfield-open-tree');
+				this.removeClass('treedropdownfield-open-tree');
+								
 				toggle.find("a")
 					.removeClass('ui-icon-triangle-1-n')
 					.addClass('ui-icon-triangle-1-s');
 					
+
 				this.getPanel().hide();
 			},
 			togglePanel: function() {
@@ -78,11 +98,11 @@
 			setTitle: function(title) {
 				if(!title) title = strings.fieldTitle;
 					
-				this.find('.title').text(title);
+				this.find('.treedropdownfield-title').text(title);
 				this.data('title', title); // separate view from storage (important for search cancellation)				
 			},
 			getTitle: function() {
-				return this.find('.title').text();
+				return this.find('.treedropdownfield-title').text();
 			},
 			setValue: function(val) {
 				this.find(':input:hidden').val(val);
@@ -167,6 +187,7 @@
 				return [];
 			}
 		});
+		
 		$('.TreeDropdownField .tree-holder li').entwine({
 			/**
 			 * Overload to return more data. The same data should be set on initial
@@ -180,12 +201,14 @@
 				return {ClassName: klass};
 			}
 		});
+		
 		$('.TreeDropdownField *').entwine({
 			getField: function() {
 				return this.parents('.TreeDropdownField:first');
 			}
 		});
-		$('.TreeDropdownField .toggle-panel-link, .TreeDropdownField span.title').entwine({
+		
+		$('.TreeDropdownField .treedropdownfield-toggle-panel-link, .TreeDropdownField span.treedropdownfield-title').entwine({
 			onclick: function(e) {
 				this.getField().togglePanel();
 				return false;
@@ -198,17 +221,18 @@
 				
 				var title = this.data('title');
 				this.find('.title').replaceWith(
-					$('<input type="text" class="title search" />')
+					$('<input type="text" class="treedropdownfield-title search" />')
 				);
+				
 				this.setTitle(title ? title : strings.searchFieldTitle);
 			},
 			setTitle: function(title) {
 				if(!title) title = strings.fieldTitle;
 				
-				this.find('.title').val(title);
+				this.find('.treedropdownfield-title').val(title);
 			},
 			getTitle: function() {
-				return this.find('.title').val();
+				return this.find('.treedropdownfield-title').val();
 			},
 			search: function(str, callback) {
 				this.openPanel();