client/node_info: hack for y-overflow. creates horizontal bar as well which is ugly

Together with addition of new attributes fixes #357

3 files changed, 11 insertions, 4 deletions

diff --git a/res/client/css/partials/info-card.scss b/res/client/css/partials/info-card.scss
index 2efbc144..d74ffff4 100644
--- a/res/client/css/partials/info-card.scss
+++ b/res/client/css/partials/info-card.scss
@@ -4,6 +4,7 @@
     position: absolute;
     right: $graph-margin-right;
     top: 130px;
+    overflow-y: auto;
 }
 
 .subtitle {
diff --git a/res/client/css/style.css b/res/client/css/style.css
index cab83837..11d01949 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -460,7 +460,8 @@ body.debug .debug-ui-right {
 .info-container {
   position: absolute;
   right: 20px;
-  top: 130px; }
+  top: 130px;
+  overflow-y: auto; }
 
 .subtitle {
   font-style: italic;
diff --git a/src/client/view/node_info.js b/src/client/view/node_info.js
index 919dfbf1..9aca84e3 100644
--- a/src/client/view/node_info.js
+++ b/src/client/view/node_info.js
@@ -163,7 +163,8 @@ function show(_graph, d) {
     var visible_attributes = model_types.type_attributes(d.type).slice(0),
         hidden_attributes = _.difference(model_types.all_attributes, visible_attributes),
         visible_elements,
-        hidden_elements;
+        hidden_elements,
+        max_height;
 
     visible_elements = visible_attributes.map(base_element_for_attribute);
     hidden_elements = hidden_attributes.map(base_element_for_attribute);
@@ -179,8 +180,12 @@ function show(_graph, d) {
     _.each(hidden_elements, function (element) { element.hide(); });
     _.each(visible_elements, function (element) { element.show(); });
 
-    $('.info').attr('class', 'info');
-    $('.info').addClass('type-' + d.type); // Add a class to distinguish types for css
+    info.attr('class', 'info');
+    info.addClass('type-' + d.type); // Add a class to distinguish types for css
+
+    // hack - should be able to set max-height via css percentage, no?
+    max_height = $(document.body).innerHeight() - $('.info')[0].getBoundingClientRect().top * 2;
+    info[0].style['max-height'] = String(max_height) + 'px';
 
     _.each(visible_attributes, function (attr) {
         var element = edit_element_for_attribute(attr);