3 files changed, 15 insertions, 31 deletions
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css
index 5f9092f3..8bb90331 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.css
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -12,10 +12,11 @@
    background-color: #FFF;
    background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px);
    color: #333;
+    display: -webkit-box;
    font-family: monospace;
    padding: 0;
    margin: 0;
-    display: -webkit-box;
+    overflow-y: scroll;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
 }
@@ -23,7 +24,4 @@
    list-style-type: none;
    margin: 3px 6px;
    position: relative;
-}
-.rule-list li  {
-    
 }
 \ No newline at end of file
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html
index 69154d8d..efede847 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.html
+++ b/js/panels/css-panel/rule-list.reel/rule-list.html
@@ -14,8 +14,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                "module" : "js/panels/css-panel/rule-list.reel",
                "name" : "RuleList",
                "properties" : {
-                    "element" : {"#" : "container"},
+                    "element" : {"#" : "rule-list"}
-                    "listElement": {"#": "rules-list"}
                }
            }
        }
@@ -78,8 +77,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
    </script>
 </head>
 <body>
-<div id="container" class="rule-list-container">
+<ul id="rule-list" class="rule-list"></ul>
-    <ul id="rules-list" class="rule-list"></ul>
-</div>
 </body>
 </html>
 \ No newline at end of file
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js
index 11cda89c..44d6d864 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -11,6 +11,9 @@ exports.RuleList = Montage.create(Component, {
    hasTemplate: {
        value: true
    },
+    listElement : {
+        value: null
+    },
    _rules: {
        value: null
    },
@@ -22,34 +25,19 @@ exports.RuleList = Montage.create(Component, {
            if(!list) {
                return null;
            }
+            //debugger;
            console.log('list: ', list);
            this._rules = list;
-            this.needsDraw = this._needsAppend = true;
+            this.needsDraw = true;
-        }
+            this._needsAppend = true;
-    },
-    _contentController: {
-        value: null
-    },
-    contentController: {
-        get: function() {
-            return this._contentController;
-        },
-        set: function(controller) {
-            Object.defineBinding(this, 'rules', {
-                "boundObject": controller,
-                "boundObjectPropertyPath": "ruleList",
-                "oneway": true
-            });
-            this._contentController = controller;
        }
    },
    templateDidLoad : {
        value: function() {
            console.log("Rule List : template did load");
            //this.condition = true;
+            this.needsDraw = true;
+            //debugger;
        }
    },
    prepareForDraw : {
@@ -59,6 +47,7 @@ exports.RuleList = Montage.create(Component, {
    },
    draw : {
        value: function() {
+            console.log("Rule List - Draw");
            if(this._needsAppend) {
                this._rules.forEach(function(rule) {
                    var componentBase = this.supportedRules[rule.type],
@@ -66,10 +55,10 @@ exports.RuleList = Montage.create(Component, {
                    if(componentBase) {
                        el = document.createElement(this.ruleNodeName);
-                        instance = componentBase.create();
+                        instance = Montage.create(componentBase);
                        instance.element = el;
                        instance.rule = rule;
-                        this.listElement.appendChild(el);
+                        this.element.appendChild(instance.element);
                        instance.needsDraw = true;
                    }