From 8ed7b697bd8cf67289124368782c07b0f5fd286d Mon Sep 17 00:00:00 2001
From: Felix Hayashi <ninshinobi@msn.com>
Date: Fri, 15 Jan 2016 15:28:21 +0100
Subject: [PATCH] added clearfix + updated example

See https://github.com/almende/vis/issues/1568#issuecomment-171961393
---
 examples/network/other/configuration.html | 11 +++++++++++
 lib/shared/configuration.css              |  5 +++++
 2 files changed, 16 insertions(+)

diff --git a/examples/network/other/configuration.html b/examples/network/other/configuration.html
index 1d8673b2..74bf9e79 100644
--- a/examples/network/other/configuration.html
+++ b/examples/network/other/configuration.html
@@ -52,6 +52,15 @@
         configure: true
       };
       network = new vis.Network(container, data, options);
+      
+      network.on("configChange", function() {
+        // this will immediately fix the height of the configuration
+        // wrapper to prevent unecessary scrolls in chrome.
+        // see https://github.com/almende/vis/issues/1568
+        var div = container.getElementsByClassName('vis-configuration-wrapper')[0];
+        div.style["height"] = div.getBoundingClientRect().height + "px";
+      });
+      
     }
   </script>
   <script src="../../googleAnalytics.js"></script>
@@ -64,6 +73,8 @@
   You can also supply a custom filter function or filter string. You can press the generate options button below to have an options object printed. You can then use
   this in the network.
 </p>
+<p><b>Note:</b> The configurator is recreated in the dom tree on input change. This may cause undesired scrolls in your application. In order to avoid this, explicitly set the height of the configurator (see this example's source code).
+</p>
 <br />
 <div id="mynetwork"></div>
 
diff --git a/lib/shared/configuration.css b/lib/shared/configuration.css
index d8becc87..84f05c06 100644
--- a/lib/shared/configuration.css
+++ b/lib/shared/configuration.css
@@ -10,6 +10,11 @@ div.vis-configuration-wrapper {
     width:700px;
 }
 
+div.vis-configuration-wrapper::after {
+  clear: both;
+  content: "";
+  display: block;
+}
 
 div.vis-configuration.vis-config-option-container{
     display:block;