From 1fc5610874928c726fd6aeaff74f7a19ad87e222 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Tue, 16 Apr 2013 18:23:59 +0100
Subject: [PATCH] [#342,bugfix,timeline][s]: remove explicitly setting of width
 in JS as not the right way - fixes #342.

---
 _includes/recline-deps.html  | 1 +
 css/timeline.css             | 3 +++
 docs/tutorial-views.markdown | 6 ++++--
 src/view.timeline.js         | 5 -----
 4 files changed, 8 insertions(+), 7 deletions(-)
 create mode 100644 css/timeline.css

diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html
index 4174fbfb..d58ce6d0 100644
--- a/_includes/recline-deps.html
+++ b/_includes/recline-deps.html
@@ -17,6 +17,7 @@
   <link rel="stylesheet" href="{{page.root}}css/transform.css">
   <link rel="stylesheet" href="{{page.root}}css/map.css">
   <link rel="stylesheet" href="{{page.root}}css/multiview.css">
+  <link rel="stylesheet" href="{{page.root}}css/timeline.css">
   <!-- /Recline CSS components -->
 
   <!-- 3rd party JS libraries -->
diff --git a/css/timeline.css b/css/timeline.css
new file mode 100644
index 00000000..0036d16f
--- /dev/null
+++ b/css/timeline.css
@@ -0,0 +1,3 @@
+.recline-timeline {
+  position: relative;
+}
diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown
index 9fbdfe74..069862fb 100644
--- a/docs/tutorial-views.markdown
+++ b/docs/tutorial-views.markdown
@@ -251,9 +251,10 @@ First, add the additional dependencies for the timeline view. The timeline is bu
 <script type="text/javascript" src="vendor/timeline/20120520/js/timeline.js"></script>
 {% endhighlight %}
 
-Now, create a new div for the map:
+Now, create a new div for the map (must have an explicit height for the timeline to render):
 
 {% highlight html %}
+<style type="text/css">#mytimeline .recline-timeline { height: 400px; }</style>
 <div id="mytimeline"></div>
 {% endhighlight %}
 
@@ -264,7 +265,8 @@ previously:
 {% include tutorial-views-timeline.js %}
 {% endhighlight %}
 
-<div id="mytimeline">&nbsp;</div>
+<style type="text/css">#mytimeline .recline-timeline { height: 400px; }</style>
+<div id="mytimeline"></div>
 <div style="clear: both;"></div>
 
 <script type="text/javascript">
diff --git a/src/view.timeline.js b/src/view.timeline.js
index cccf6c60..87cdabe4 100644
--- a/src/view.timeline.js
+++ b/src/view.timeline.js
@@ -67,11 +67,6 @@ my.Timeline = Backbone.View.extend({
 
   _initTimeline: function() {
     var $timeline = this.el.find(this.elementId);
-    // set width explicitly o/w timeline goes wider that screen for some reason
-    var width = Math.max(this.el.width(), this.el.find('.recline-timeline').width());
-    if (width) {
-      $timeline.width(width);
-    }
     var data = this._timelineJSON();
     this.timeline.init(data, this.elementId, this.state.get("timelineJSOptions"));
     this._timelineIsInitialized = true