interface : better css for container

browser/css/vidjil.less

@@ -39,6 +39,8 @@ ul{
   -ms-user-select: none;
   user-select: none;
   height :100%;
+  margin : auto;
+  overflow : hidden;
 }
 
 #top-container {
@@ -62,19 +64,21 @@ ul{
   user-select: none;
 }
 
-#switch{
-  float: right;
-  position: relative;
-  top: -50px;
-  height:0px;
+#right-container{
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  user-select: none;
+  float : right;
+  width : 0px;
 }
 
 #left-container {
   height:100%;
   width : @width_left_container;
-  height : 100%;
-  overflow-y : none;
   float : left;
+  overflow-y : none;
   -khtml-user-select: auto;
   -webkit-user-select: auto;
   -moz-user-select: auto;
@@ -85,9 +89,7 @@ ul{
 #visu, #visu2 {
   display : inline-block;
   height : 50%;
-  width: -moz-calc(~"100% - " ( @width_left_container ) );
-  width: -webkit-calc(~"100% - " ( @width_left_container ) );
-  width: calc(~"100% - " ( @width_left_container ) );
+  width : 100%;
   overflow:hidden;
 }
 
@@ -733,7 +735,7 @@ span .substitution{
 }
 
 .axis_select select {
-    background: @background;
+    background: @highlight;
     color: @default;
     border: 0;
     height: 16px;

browser/index.html

@@ -194,7 +194,7 @@
         <!-- MID-CONTAINER -->
         <div id="mid-container" onmouseover="hideSelector()">
         <!-- LEFT-CONTAINER -->
-            <span id="left-container">
+            <div id="left-container">
 
             <div id="left">
 
@@ -254,10 +254,15 @@
 
             </div>
 
-            </span>
+            </div>
         <!-- fin left-container -->
 
-        <!-- VISU-CONTAINER / RIGHT-CONTAINER -->
+        <!-- RIGHT-CONTAINER -->
+            <div id="right-container">
+                aa
+            </div>
+
+        <!-- VISU-CONTAINER  -->
             <div id="visu-container">
             <!-- VISU -->
             <div id="visu2"></div>

browser/js/scatterPlot.js

@@ -379,7 +379,7 @@ ScatterPlot.prototype = {
  * 
  * */
     resize :function(){
-        this.resizeW = document.getElementById(this.id).offsetWidth-this.marge_left;
+        this.resizeW = document.getElementById(this.id).parentNode.offsetWidth-this.marge_left;
         this.resizeH = document.getElementById(this.id).offsetHeight-this.marge_top;
         if (this.resizeW<0.1) this.resizeW=0.1;
         if (this.resizeH<0.1) this.resizeH=0.1;
@@ -388,10 +388,10 @@ ScatterPlot.prototype = {
         if (this.resizeCoef<0.1) this.resizeCoef=0.1;
         
         this.vis = d3.select("#"+this.id+"_svg")
-        .attr("width", document.getElementById(this.id).offsetWidth)	
+        .attr("width", document.getElementById(this.id).parentNode.offsetWidth)	
         .attr("height", document.getElementById(this.id).offsetHeight)
         d3.select("#"+this.id+"_back")
-        .attr("width", document.getElementById(this.id).offsetWidth)
+        .attr("width", document.getElementById(this.id).parentNode.offsetWidth)
         .attr("height", document.getElementById(this.id).offsetHeight);
         
         this.initGrid();