From e4efee604f68fa84aaf536e6e1cdb9712d2e9744 Mon Sep 17 00:00:00 2001
From: Graham J <grahamj@users.noreply.github.com>
Date: Thu, 5 Oct 2017 08:07:17 -0400
Subject: [PATCH] Allow disabling of RangeItem limitSize (#3050)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Some browsers cannot handle very large DIVs so by default range DIVs
can be truncated outside the visible area. This change allows the use
of a new `limitSize` item option which disables this functionality,
allowing the creation of full-width DIVs.

I don’t see an existing test spec that covers RageItem.js so I’m
submitting without tests. However we’ve using Timeline in production on
a fairly large project with these changes in place for several months
and it works fine.
---
 docs/timeline/index.html                 | 8 ++++++++
 lib/timeline/component/item/RangeItem.js | 3 ++-
 lib/timeline/optionsTimeline.js          | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 9e7c4d81..e76267de 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -342,6 +342,14 @@ var items = new vis.DataSet([
         Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
       </td>
     </tr>
+    <tr>
+      <td>limitSize</td>
+      <td>Boolean</td>
+      <td>no</td>
+      <td>Some browsers cannot handle very large DIVs so by default range DIVs can be truncated outside the visible area.
+        Setting this to <code>false</code> will cause the creation of full-size DIVs.
+      </td>
+    </tr>
     <tr class='toggle collapsible' onclick="toggleTable('itemOptionTable', 'itemEditable', this);">
       <td><span parent="itemEditable" class="right-caret"></span> editable</td>
       <td>Boolean or Object</td>
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 7457b266..64eb518b 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -231,7 +231,8 @@ RangeItem.prototype.repositionX = function(limitSize) {
   var contentWidth;
 
   // limit the width of the range, as browsers cannot draw very wide divs
-  if (limitSize === undefined || limitSize === true) {
+  // unless limitSize: false is explicitly set in item data
+  if (this.data.limitSize !== false && (limitSize === undefined || limitSize === true)) {
     if (start < -parentWidth) {
       start = -parentWidth;
     }
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index 147c044a..9ae8b49c 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -94,6 +94,7 @@ let allOptions = {
     range: { 'boolean': bool, 'undefined': 'undefined'},
     __type__: { 'boolean': bool, object}
   },
+  limitSize: {'boolean': bool},
   locale:{string},
   locales:{
     __any__: {any},