[#342,bugfix,timeline][s]: remove explicitly setting of width in JS as not the right way - fixes #342.

_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 -->

css/timeline.css

@@ -0,0 +1,3 @@
+.recline-timeline {
+  position: relative;
+}

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">

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