Fixed #621: item ranges being displayed with a minimum of 10px (twice the padding).

HISTORY.md

@@ -2,6 +2,17 @@
 http://visjs.org
 
 
+## not yet released, version 4.0.0-SNAPSHOT
+
+### Timeline
+
+- Fixed range items not being displayed smaller than 10 pixels (twice the
+  padding). In order to have overflowing text, one should now apply css style
+  `.vis.timeline .item.range { overflow: visible; }` instead of
+  `.vis.timeline .item.range .content { overflow: visible; }`.
+  See example 18_range_overflow.html.
+
+
 ## not yet released, version 3.9.2-SNAPSHOT
 
 ### Network

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "vis",
-  "version": "3.9.2-SNAPSHOT",
+  "version": "4.0.0-SNAPSHOT",
   "main": ["dist/vis.min.js", "dist/vis.min.css"],
   "description": "A dynamic, browser-based visualization library.",
   "homepage": "http://visjs.org/",

dist/vis.css

@@ -173,7 +173,7 @@
   border-width: 1px;
   background-color: #D5DDF6;
   display: inline-block;
-  padding: 5px;
+  overflow: hidden;
 }
 
 .vis.timeline .item.selected {
@@ -217,7 +217,6 @@
 }
 
 .vis.timeline .item.background {
-  overflow: hidden;
   border: none;
   background-color: rgba(213, 221, 246, 0.4);
   box-sizing: border-box;
@@ -229,13 +228,11 @@
   position: relative;
   display: inline-block;
   max-width: 100%;
-  overflow: hidden;
 }
 
 .vis.timeline .item.background .content {
   position: absolute;
   display: inline-block;
-  overflow: hidden;
   max-width: 100%;
   margin: 5px;
 }
@@ -250,7 +247,8 @@
 
 .vis.timeline .item .content {
   white-space: nowrap;
-  overflow: hidden;
+  box-sizing: border-box;
+  padding: 5px;
 }
 
 .vis.timeline .item .delete {

dist/vis.js

@@ -4,8 +4,8 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version 3.9.2-SNAPSHOT
- * @date    2015-02-05
+ * @version 4.0.0-SNAPSHOT
+ * @date    2015-02-09
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com

dist/vis.min.js

@@ -4,8 +4,8 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version 3.9.2-SNAPSHOT
- * @date    2015-02-05
+ * @version 4.0.0-SNAPSHOT
+ * @date    2015-02-09
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com

examples/timeline/18_range_overflow.html

@@ -11,7 +11,7 @@
       font-family: sans-serif;
     }
 
-    .vis.timeline .item.range .content {
+    .vis.timeline .item.range {
       overflow: visible;
     }
   </style>
@@ -22,7 +22,7 @@
   In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
 </p>
 <pre>
-.vis.timeline .item.range .content {
+.vis.timeline .item.range {
   overflow: visible;
 }
 </pre>

lib/timeline/component/css/item.css

@@ -6,7 +6,7 @@
   border-width: 1px;
   background-color: #D5DDF6;
   display: inline-block;
-  padding: 5px;
+  overflow: hidden;
 }
 
 .vis.timeline .item.selected {
@@ -50,7 +50,6 @@
 }
 
 .vis.timeline .item.background {
-  overflow: hidden;
   border: none;
   background-color: rgba(213, 221, 246, 0.4);
   box-sizing: border-box;
@@ -62,13 +61,11 @@
   position: relative;
   display: inline-block;
   max-width: 100%;
-  overflow: hidden;
 }
 
 .vis.timeline .item.background .content {
   position: absolute;
   display: inline-block;
-  overflow: hidden;
   max-width: 100%;
   margin: 5px;
 }
@@ -83,7 +80,8 @@
 
 .vis.timeline .item .content {
   white-space: nowrap;
-  overflow: hidden;
+  box-sizing: border-box;
+  padding: 5px;
 }
 
 .vis.timeline .item .delete {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vis",
-  "version": "3.9.2-SNAPSHOT",
+  "version": "4.0.0-SNAPSHOT",
   "description": "A dynamic, browser-based visualization library.",
   "homepage": "http://visjs.org/",
   "repository": {